Pourquoi un élément flottant ne semble-t-il pas affecter la largeur des divisions ?

Comportement CSS Float : Comprendre la préservation de la largeur des divisions

Lors de l'application de la propriété float:left à un élément HTML, il est prévu que les éléments suivants être poussé vers la gauche plutôt que de passer à une nouvelle ligne. Cependant, dans certaines circonstances, il peut sembler que la largeur du div n'est pas affectée.

Dans l'exemple donné, le contenu du deuxième div (avec class="jaune") est correctement aligné, mais le div lui-même reste s'étend sur toute la largeur du conteneur. Ce comportement découle de la nature fondamentale du positionnement flottant.

Lorsqu'un élément flotte, il est supprimé du flux normal du document. Cependant, l'espace occupé par l'élément flottant est toujours "réservé" par l'élément suivant qui aurait occupé cet espace.

Cette réservation d'espace est documentée dans la spécification CSS, qui stipule que les blocs non positionnés les éléments de niveau (tels que divs) traitent les flotteurs comme s'ils n'existaient pas en termes de disposition verticale. Cependant, les zones de ligne (les zones rectangulaires qui contiennent du texte) sont raccourcies pour s'adapter à la zone de marge du flottant.

En conséquence, le contenu de l'élément suivant coule sur le côté du flottant, mais la largeur du Le conteneur (déterminé par l'élément non flottant suivant) reste réservé.

Pour résoudre ce problème, une solution consiste à appliquer une propriété de débordement (telle que overflow: Hidden) à l'élément suivant. Ce faisant, vous établissez un nouveau contexte de formatage de bloc, qui empêche l'élément de chevaucher la zone de marge de l'élément flottant. Cela force l'élément suivant à se réduire à une taille qui ne chevauche pas le flotteur.

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!