Pourquoi définir un débordement sur autre chose que « Visible » crée-t-il un nouveau contexte de formatage de bloc dans CSS2.1 ?

Pourquoi CSS2.1 définit-il des valeurs de débordement autres que « Visible » pour établir un nouveau contexte de formatage de bloc ?

Dans CSS2.1, les valeurs de débordement sauf « visible » " sont spécifiés pour établir un nouveau contexte de formatage de bloc (BFC). Cela peut être déroutant puisque le but recherché du débordement est de masquer le débordement sans affecter la mise en page.

En approfondissant le problème, il devient évident que les valeurs de débordement autres que « visible » comprennent deux fonctionnalités apparemment sans rapport : la création de BFC et le débordement. dissimulation. Cependant, comme démontré historiquement, les flotteurs peuvent s'étendre au-delà de leur élément parent, il est donc logique de masquer le débordement sans modifier la disposition.

Raisons de la décision

La justification derrière cette décision la décision découle principalement du défilement du contenu. Selon la liste de diffusion du groupe de travail CSS :

"Si la spécification ne le précisait pas, les flotteurs croisant du contenu défilant nécessiteraient que les navigateurs réemballent continuellement le contenu défilant (autour des flotteurs intrusifs) pendant le défilement. Cela aurait été coûteux en termes de calcul et préjudiciable aux performances de défilement. "

Comment ça Travaux

Considérez le scénario suivant : deux boîtes à hauteur fixe avec un débordement défini sur "visible", où la première boîte contient un flotteur qui s'étend au-delà de la hauteur du parent :

<div>
    <p>...</p>
</div>
<div>
    <p>...</p>
    <p>...</p>
</div>

div {
    height: 80px;
}

div:first-child:before {
    float: left;
    height: 100px;
    margin: 10px;
    content: 'Float';
}

Lorsque le débordement est maintenu comme « visible », il n'y a aucun problème car le contenu n'est pas soumis au défilement. Cependant, lorsque le débordement est défini sur une valeur autre que « visible », le contenu devient à la fois tronqué par les limites de la boîte et défilable. Si la deuxième boîte a overflow: auto, elle ressemblerait à ceci :

[Image de deux boîtes à hauteur fixe avec débordement : auto]

Comme le float gêne le défilement, le navigateur doit remballer le contenu pour garantir qu’il reste visible. Répéter ce processus à chaque fois que le contenu est repeint pendant le défilement peut nuire aux performances.

Cohérence et défilement caché

Une autre idée fausse apparente est que les conteneurs avec débordement : cachés cachent simplement le contenu et ne peut pas défiler. Bien qu'il n'y ait pas d'interface utilisateur pour le défilement, il est toujours possible de faire défiler le contenu par programme en ajustant la propriété scrollTop. Même dans ce cas, le contenu devrait être réemballé pour éviter l'obscurcissement du flotteur.

Par conséquent, toute valeur de débordement autre que « visible » entraîne un BFC à des fins de cohérence.

Changements dans CSS2.1

Dans CSS2.1, l'inclusion d'un BFC pour les valeurs de débordement autres que "visible" conduit à des changements dans la façon dont les éléments interagissent avec les flotteurs :

• La boîte entière avec débordement est écartée des flotteurs, car elle crée un BFC qui encapsule son contenu.
• Boîtes avec hauteur : auto et un BFC s'étireront verticalement pour accueillir des flotteurs, plutôt que il suffit d'adapter leur flux d'entrée contenu.

Résumé

La décision de lier la création de BFC à des valeurs de débordement autres que « visible » était principalement motivée par des considérations de performances et pour garantir la cohérence avec le programme. défilement. Malgré le comportement apparemment contradictoire, il sert à maintenir l'intégrité de la mise en page et du défilement dans des scénarios complexes impliquant des flotteurs.

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!