Pourquoi « float : left » ne modifie-t-il pas la largeur d'un div ?

Pourquoi CSS Float ne parvient pas à modifier la largeur de Div

Description du problème

En CSS, la propriété float: left est censée décaler les éléments suivants vers la gauche à la place de créer une nouvelle ligne. Cependant, dans un scénario comme celui de l’exemple donné, la deuxième division continue de s’étendre sur toute la largeur, défiant les attentes. Le contenu, en revanche, s'aligne correctement.

Explication du comportement

Ce comportement est inhérent au positionnement des flotteurs. Lorsqu'un élément flotte (le div .inline dans ce cas), le contenu circule autour de son côté droit. Les zones de ligne sont raccourcies pour s'adapter à la zone de marge du flottant, mais la largeur du bloc conteneur (établie par le div .jaune) reste réservée. Ceci est spécifié dans la spécification CSS.

Solution

Pour empêcher le div .jaune de chevaucher l'élément flottant, on peut ajouter une propriété de débordement avec une valeur autre que visible. Cela oblige le navigateur à créer un nouveau contexte de formatage de bloc, empêchant ainsi le chevauchement.

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!