Le mystère du flotteur ne redimensionnant pas la division

Lors de l'utilisation de CSS float, l'hypothèse est que les éléments suivants s'aligneront à gauche plutôt que de couler sur un nouveau doubler. Cependant, dans certains scénarios, comme dans l'exemple fourni, le div suivant continue de s'étendre sur toute la largeur au lieu de commencer à droite du premier div.

Pour comprendre ce comportement, nous approfondissons les subtilités de float positionnement. Lorsqu'un élément flotte (dans ce cas, le div .inline), le contenu en dessous s'aligne avec le côté droit de cet élément. Cependant, la largeur du bloc contenant établie par l'élément suivant (le div .jaune) est toujours préservée.

Ce comportement est décrit dans la spécification CSS : les boîtes de bloc non positionnées s'écoulent verticalement comme si le flottant ne le faisait pas. exister. Cependant, les zones de ligne à côté du flottant sont raccourcies pour s'adapter à la zone de marge du flottant.

Par conséquent, si un élément de niveau bloc (comme . Yellow div) a un arrière-plan, il s'étendra à travers l'élément flottant.

La résolution

Selon le niveau CSS 2.1, les éléments possédant certaines propriétés (remplacements au niveau des blocs, éléments établissant un nouveau contexte de formatage de bloc) ne doivent pas chevaucher la zone de marge de tous les flotteurs dans le même contexte. L'ajout d'une propriété "débordement" autre que "visible" au div .jaune l'empêche de chevaucher l'élément flottant.

Quand le chevauchement peut être utile

Il est important de notez que le chevauchement peut être bénéfique dans les situations où le contenu après l'élément flottant est suffisamment long pour continuer normalement. Restreindre le contenu par défaut pourrait empêcher son passage sous l'élément flottant.