Warum wird durch die Einstellung des Überlaufs auf etwas anderes als „Sichtbar' ein neuer Blockformatierungskontext in CSS2.1 erstellt?

Warum definiert CSS2.1 andere Überlaufwerte als „Sichtbar“, um einen neuen Blockformatierungskontext einzurichten?

In CSS2.1 werden Überlaufwerte außer „sichtbar“ definiert " werden angegeben, um einen neuen Blockformatierungskontext (BFC) einzurichten. Dies kann rätselhaft sein, da der Zweck des Überlaufs darin besteht, den Überlauf zu verbergen, ohne das Layout zu beeinträchtigen.

Bei näherer Betrachtung des Problems wird deutlich, dass Überlaufwerte außer „sichtbar“ zwei scheinbar nicht miteinander verbundene Funktionen umfassen: BFC-Erstellung und Überlauf verstecken. Wie jedoch in der Vergangenheit gezeigt wurde, können Floats über ihr übergeordnetes Element hinausgehen, sodass es sinnvoll ist, den Überlauf zu verbergen, ohne das Layout zu ändern.

Gründe für die Entscheidung

Die Begründung dahinter Die Entscheidung hängt hauptsächlich vom Scrollen des Inhalts ab. Gemäß der Mailingliste der CSS-Arbeitsgruppe:

„Wenn die Spezifikation dies nicht spezifiziert hätte, müssten Browser, die sich mit scrollbaren Inhalten überschneiden, den scrollbaren Inhalt während des Scrollens kontinuierlich neu umbrechen (um eindringende Floats). Dies wäre der Fall gewesen.“ war rechenintensiv und beeinträchtigte die Scrollleistung.“

Wie es ist Funktioniert

Stellen Sie sich das folgende Szenario vor: Zwei Boxen mit fester Höhe und Überlauf auf „sichtbar“, wobei die erste Box einen Float enthält, der über die Höhe des übergeordneten Elements hinausgeht:

<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';
}

Wenn der Überlauf als „sichtbar“ beibehalten wird, gibt es kein Problem, da der Inhalt nicht gescrollt werden kann. Wenn der Überlauf jedoch auf einen anderen Wert als „sichtbar“ eingestellt ist, wird der Inhalt sowohl durch die Grenzen des Felds abgeschnitten als auch scrollbar. Wenn das zweite Feld „overflow: auto“ hat, würde es etwa so aussehen:

[Bild von zwei Feldern mit fester Höhe und „overflow: auto“]

Da der Float das Scrollen behindert, muss der Browser das neu umbrechen Inhalte, um sicherzustellen, dass sie sichtbar bleiben. Das Wiederholen dieses Vorgangs jedes Mal, wenn der Inhalt während des Scrollens neu dargestellt wird, kann sich negativ auf die Leistung auswirken.

Konsistenz und verstecktes Scrollen

Ein weiteres offensichtliches Missverständnis ist, dass Container mit „overflow:hidden“ einfach Inhalte verbergen und kann nicht gescrollt werden. Obwohl es keine Benutzeroberfläche zum Scrollen gibt, ist es dennoch möglich, den Inhalt programmgesteuert zu scrollen, indem Sie die scrollTop-Eigenschaft anpassen. Selbst in diesem Fall müsste der Inhalt neu umbrochen werden, um eine Float-Verdeckung zu vermeiden.

Daher führt jeder Überlaufwert außer „sichtbar“ aus Konsistenzgründen zu einem BFC.

Änderungen in CSS2.1

In CSS2.1 ist die Einbindung eines BFC für andere Überlaufwerte als „sichtbar“ führte zu Änderungen in der Art und Weise, wie Elemente mit Floats interagieren:

• Die gesamte Box mit Überlauf wird von Floats weggeschoben, da dadurch ein BFC erstellt wird, der seinen Inhalt kapselt.
• Boxen mit der Höhe: auto und einem BFC werden vertikal gestreckt, um Floats aufzunehmen, anstatt einfach ihren Zufluss anpassen Inhalt.

Zusammenfassung

Die Entscheidung, die BFC-Erstellung mit anderen Überlaufwerten als „sichtbar“ zu verknüpfen, wurde in erster Linie von Leistungsüberlegungen und der Gewährleistung der Konsistenz mit der Programmatik bestimmt Scrollen. Trotz des scheinbar widersprüchlichen Verhaltens dient es dazu, die Integrität des Layouts und des Bildlaufs in komplexen Szenarios mit Floats aufrechtzuerhalten.

Das obige ist der detaillierte Inhalt vonWarum wird durch die Einstellung des Überlaufs auf etwas anderes als „Sichtbar' ein neuer Blockformatierungskontext in CSS2.1 erstellt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!