Pourquoi un élément flottant n'affecte-t-il pas la largeur de la division suivante ?

Pourquoi CSS Float ne modifie-t-il pas la largeur de la division suivante ?

Lors de l'utilisation de la propriété float:left sur un élément, il est prévu que l'élément suivant se positionnerait à droite de l'élément flottant, et non en dessous. Cependant, dans certains cas, l'élément suivant peut continuer à s'étendre sur toute la largeur.

Cela se produit en raison du comportement fondamental des éléments flottants en CSS. Lorsqu'un élément flotte, il est retiré du flux normal du document et devient effectivement comme une image. Le contenu qui suit l'élément flottant circule autour de lui, créant un saut de ligne.

Cependant, la largeur du bloc contenant, qui détermine l'espace horizontal disponible pour les éléments suivants, n'est pas affectée par l'élément flottant. La zone de marge de l'élément flottant (y compris tout contenu) est réservée dans le bloc conteneur, les éléments suivants doivent donc toujours s'aligner sur son bord droit.

Un exemple fourni par le W3C illustre ce comportement :

[Image d'un flotteur chevauchant un élément suivant dans un paragraphe]

Comme le démontre l'image, l'élément flottant occupe de l'espace dans le bloc conteneur et le contenu suivant s'enroule autour de lui. Les zones de ligne à droite du flottant sont raccourcies pour s'y adapter.

Solution : établir un nouveau contexte de formatage de bloc

Pour éviter que l'élément suivant ne chevauche le flottant élément, CSS fournit une solution en utilisant la propriété overflow. Définir la propriété overflow sur autre chose que « visible » (par exemple, « caché » ou « défilement ») établit un nouveau contexte de formatage de bloc pour l'élément.

Dans ce nouveau contexte de formatage de bloc, la zone de marge de l'élément flottant est contraint, lui interdisant de chevaucher d’autres flotteurs dans le même contexte. De ce fait, l'élément suivant peut désormais s'aligner à droite de l'élément flottant :

[Exemple avec débordement : caché appliqué]

.jaune {

overflow: hidden;

>

Ce comportement devient particulièrement pertinent lorsqu'il s'agit d'éléments où le contenu circulant autour de l'élément flottant est suffisamment long pour continuer normalement après le flotteur. Restreindre le chevauchement par défaut empêcherait le contenu de continuer sous l'élément flottant.

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!