Pourquoi « overflow : hidden » provoque-t-il une expansion de la hauteur dans CSS lorsqu'il contient des éléments flottants ?

Débordement : l'effet secondaire d'expansion en hauteur de Hidden

Dans le monde de la mise en page CSS, le débordement : la propriété cachée joue un rôle crucial dans le contrôle le comportement du contenu qui dépasse l'espace qui lui est alloué. Cependant, un effet secondaire inattendu de l'utilisation de cette propriété est qu'elle peut conduire à une expansion en hauteur de l'élément extérieur pour accueillir des éléments flottants.

Pour comprendre ce phénomène, considérons l'exemple suivant :

<div class="outer">
    <div class="inner-left"></div>
    <div class="inner-right"></div>
</div>

.outer {
    width: 100px;
    border: solid 5px #000;
}
.inner-left {
    float: left;
    height: 200px;
    width: 50px;
    background: #f00;
}
.inner-right {
    float: right;
    height: 200px;
    width: 50px;
    background: #0f0;
}

Lorsque la propriété overflow: Hidden est appliquée à l'élément .outer, on observe qu'elle s'agrandit en hauteur pour englober les deux éléments flottants (.inner-left et .intérieur-droit). Pourquoi cela se produit-il ?

L'explication réside dans le concept de contextes de formatage de blocs. Une boîte de bloc avec un débordement non visible (valeur par défaut) crée un nouveau contexte de formatage de bloc. Les boîtes qui créent de nouveaux contextes de formatage de bloc sont définies pour s'étirer pour contenir leurs flottants par hauteur si elles n'ont pas elles-mêmes de hauteur spécifiée, par défaut sur auto.

Dans l'exemple ci-dessus, l'élément .outer n'a initialement aucun élément explicite. hauteur, ce qui donne une valeur automatique par défaut. Puisqu'elle crée un nouveau contexte de formatage de bloc, la boîte s'étire pour s'adapter aux bords inférieurs des éléments flottants qu'elle contient, même si le contenu de l'élément .outer est plus court.

Cet effet secondaire du débordement : caché est ce n'est pas la même chose que le dégagement des flotteurs. L'effacement ne se produit que lorsque la propriété clear est explicitement utilisée et qu'il y a des flottants précédents à effacer. De plus, l'utilisation d'un élément de hauteur nulle ou d'un pseudo-élément à l'extrémité de l'élément conteneur pour forcer le dégagement (clearfix) n'entraîne pas l'étirement de l'élément extérieur en hauteur.

Comprendre ce comportement est crucial pour gérer efficacement mises en page et empêcher une expansion inattendue de la hauteur dans votre code CSS. En tenant compte de l'impact des contextes de formatage des blocs et du dégagement des flottants, vous pouvez affiner vos conceptions pour obtenir les résultats visuels souhaités.

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!