Pourquoi « overflow : hidden » provoque-t-il une croissance inattendue de la hauteur dans les conteneurs avec des éléments flottants ?

Débordement : croissance en hauteur cachée et inattendue des éléments flottants

Question :
Lorsque le débordement : caché est appliqué à un élément externe contenant des éléments flottants, pourquoi l'élément externe augmente-t-il de manière inattendue en hauteur pour contenir eux ?

Réponse :
La croissance inattendue de la hauteur se produit parce que overflow: Hidden crée un nouveau contexte de formatage de bloc (BFC). Les racines BFC, qui incluent des éléments avec un débordement qui n'est pas visible, étendent leur hauteur pour accueillir les flottants si elles n'ont pas de hauteur spécifiée.

Selon la spécification CSS, bloquer le formatage des racines de contexte "étirer pour contenir leurs flotteurs par hauteur s'ils n'ont pas eux-mêmes de hauteur spécifiée, par défaut sur auto." Cette augmentation de hauteur s'applique également aux descendants flottants dont le bord de la marge inférieure dépasse le bord inférieur du contenu de la racine BFC.

Distinction avec les flotteurs de compensation
Notez que ce comportement diffère du dégagement des flotteurs, qui ne fait que se produit lorsque la propriété clear est appliquée et qu'il y a des flottants précédents à effacer. Dans ce cas :

• Utiliser clear : les deux sur un élément extérieur à la racine BFC efface les flotteurs mais ne provoque pas l'étirement de l'élément extérieur.
• Placer un élément de hauteur nulle avec clear : les deux à l'intérieur de la racine BFC garantissent que l'élément extérieur s'étend vers le bas pour accueillir le bord inférieur des éléments flottants (appelé "clearfix").

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!