Maison > Article > interface Web > 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 :
Sur la base de ces propriétés, nous pouvons conclure que :
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!