Pourquoi le texte s'enroule-t-il autour des éléments flottants ?

Anomalie d'habillage du texte : pourquoi le texte circule-t-il autour des flotteurs ?

Lors du positionnement d'éléments sur une page Web, le comportement par défaut des éléments HTML est de haut en bas, comme spécifié dans le flux normal des documents. Cependant, lorsque la propriété float est appliquée à un élément, ce comportement change.

Éléments flottants : briser le flux

Float place un élément sur le côté gauche ou droit de son conteneur, provoquant l'enroulement du texte et des éléments en ligne autour de lui. En effet, l'élément flottant est supprimé du flux normal de la page, ce qui signifie que d'autres éléments peuvent se chevaucher ou être superposés par lui, de la même manière que les éléments positionnés de manière absolue.

Éléments de texte et en ligne : les seuls Exceptions

Bien que tous les autres éléments soient affectés par la position d'un élément flottant, le texte et les éléments en ligne sont l'exception. Ils continuent de s'enrouler autour de l'élément flottant, en évitant les chevauchements.

Comprendre les propriétés du flotteur

Selon la documentation CSS :

• Le flotteur La propriété CSS place un élément sur le côté gauche ou droit de son conteneur, permettant au texte et aux éléments en ligne de s'enrouler autour de lui.
• L'élément est supprimé du flux normal de la page, tout en restant une partie du flux.

Sur la base de ces propriétés, nous pouvons conclure que :

• Supprimé du flux normal :Les éléments flottants peuvent se chevaucher ou être recouverts par d'autres éléments dans le flux normal.
• Exception d'enroulement pour le texte et les éléments en ligne : Ces éléments s'enrouleront toujours autour des éléments flottants, quelle que soit leur position.

Exemple en action

Considérez le code HTML et CSS suivant :

<code class="html"><div class="float"></div>
<div class="blue"></div></code>

<code class="css">.float {
  width: 100px;
  height: 100px;
  background: red;
  float: left;
}

.blue {
  width: 200px;
  height: 200px;
  background: blue;
}</code>

Dans cet exemple, le div rouge avec la classe "float" sera positionné sur le côté gauche, tandis que le div bleu avec la classe "blue" sera positionné en dessous. Cependant, tout texte apparaissant entre les divs rouge et bleu s'enroulera autour du div rouge, préservant ainsi l'intégrité du flux de texte.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!