Comment « overflow:hidden » affecte-t-il les éléments flottants et leur conteneur parent ?

Débordement CSS : comportement masqué et flottant

En CSS, la propriété overflow contrôle le comportement du contenu lorsqu'il dépasse la taille de son conteneur. Lorsqu'il est appliqué à un élément avec des enfants flottants, overflow:hidden a un impact spécifique sur la mise en page.

Impact sur le comportement de Float

Dans l'exemple fourni, l'élément ul a plusieurs enfants li flottants. Sans overflow:hidden, l'ul s'effondrerait à une hauteur de 0px, avec son contenu caché. En effet, les éléments flottants sont supprimés du flux normal, provoquant l'effondrement de l'élément parent.

Cependant, lorsque overflow:hidden est appliqué à l'ul, il établit un nouveau contexte de formatage de bloc (BFC). Un BFC est une région dans laquelle les éléments enfants sont contenus et n'affectent pas la disposition des éléments en dehors de la région.

En créant un BFC, overflow:hidden empêche l'ul de s'effondrer. Au lieu de cela, il reste visible, contenant ses enfants flottants. Cela permet au texte ou à d'autres éléments en dehors du BFC, comme l'élément p dans ce cas, d'apparaître après l'ul, plutôt qu'à sa droite.

Application d'effets clairs

En plus de contenir des éléments enfants, un BFC a également pour effet d'effacer les flottants. Cela signifie que tout texte ou élément suivant le ul apparaîtra sur une nouvelle ligne en dessous. C'est ce qu'on appelle un « float clear ».

Résumé

En CSS, overflow:hidden appliqué à un élément avec des enfants flottants :

• Crée un nouveau contexte de formatage de bloc, contenant les enfants.
• Empêche l'élément parent de s'effondrer.
• Agit comme un flotteur clair, garantissant que le contenu suivant le BFC apparaît sur une nouvelle ligne.

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!