Pourquoi « overflow : Hidden » augmente-t-il la hauteur d'un élément parent avec des enfants flottants ?

Débordement : extension cachée et de la hauteur de l'élément avec des enfants flottants

Dans une tournure surprenante, le réglage du débordement : caché sur un élément extérieur peut le provoquer grandir en hauteur pour accueillir les éléments enfants flottants. Pour comprendre pourquoi, examinons le concept de contextes de formatage de bloc.

Lorsqu'un élément de bloc avec un débordement défini sur une valeur non visible (telle que masqué) est rencontré, il établit un nouveau contexte de formatage de bloc. Surtout, les racines de contexte de formatage de bloc (comme on appelle ces éléments) sont censées s'étendre verticalement pour contenir leurs descendants flottants, si elles n'ont pas de hauteur explicite définie.

Ce comportement découle d'une révision introduite dans CSS2. 1 pour aborder un problème différent. Le changement a effectivement étendu le concept de dégagement, où le bord inférieur d'un flotteur est contenu par son bloc conteneur (parent), pour s'appliquer aux racines de contexte de formatage de bloc sans hauteur spécifiée.

Dans l'exemple fourni, l'élément extérieur est défini sur overflow: masqué, déclenchant la création d'un nouveau contexte de formatage de bloc. Étant donné que l'élément extérieur n'a pas de hauteur spécifiée, il est par défaut automatique et s'étire vers le bas pour enfermer les éléments intérieurs flottants.

Il est important de distinguer ce phénomène du dégagement du flotteur. Le dégagement se produit lorsqu'un élément avec clear: les deux ou un effet similaire force les flotteurs précédents vers le haut du conteneur. En revanche, le débordement d'une racine de contexte de formatage de bloc pour contenir des flottants se produit uniquement dans ce contexte et n'a aucun effet sur les éléments en dehors de celui-ci.

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!