Pourquoi « overflow : hidden » augmente-t-il la hauteur d'un conteneur parent avec des enfants flottants ?

Dévoilement du mystère : pourquoi le débordement : déclencheurs cachés de l'expansion de la hauteur

Dans le domaine du CSS, la propriété overflow peut modifier radicalement le comportement de certains éléments visuels. Cependant, un effet secondaire inattendu est sa capacité à augmenter la hauteur d'un élément extérieur lorsqu'il est utilisé conjointement avec des éléments flottants.

Pour comprendre ce phénomène, nous devons nous plonger dans les subtilités des contextes de formatage de blocs (BFC). Overflow : Hidden déclenche la création d'un BFC, un conteneur qui héberge et influence le comportement de ses éléments internes.

Le concept de "racines de contexte de formatage de bloc" est crucial pour comprendre cet effet. Ce sont des boîtes de bloc au sein d'un BFC qui n'ont pas de hauteur explicite (auto par défaut). Lorsque des flottants sont présents dans de telles boîtes, la spécification exige que les boîtes s'étendent verticalement pour englober leurs descendants flottants.

Ce comportement découle d'une modification CSS2.1 destinée à résoudre un problème distinct. Cependant, cela a conduit à l'effet secondaire observé dans l'exemple donné, où l'élément extérieur se dilate pour accueillir les éléments flottants.

Pour clarifier, cet effet diffère de l'utilisation de la propriété clear pour le dégagement du flotteur. Clearance efface exclusivement les flotteurs précédents ; cela n'affecte pas directement la hauteur de l'élément extérieur. Cependant, l'utilisation de clear à l'intérieur de l'élément extérieur peut déclencher une expansion en hauteur en raison de son statut de frère suivant des éléments flottants. Cette technique, connue sous le nom de « clearfix », utilise un élément de hauteur nulle pour forcer le confinement du flotteur et l'expansion ultérieure du conteneur.

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!