Wie erstellt ein nicht sichtbarer Überlauf in CSS2.1 Blockformatierungskontexte und wirkt sich auf das Layout aus?

Überlaufverhalten in CSS2.1: Einrichten neuer Blockformatierungskontexte

In CSS2.1 schreibt die Spezifikation vor, dass jeder Überlaufwert außer „sichtbar“ erstellt einen neuen Blockformatierungskontext (BFC). Diese Entscheidung hat Fragen über die Gründe für die Zusammenführung zweier scheinbar unabhängiger Funktionen aufgeworfen: BFC-Erstellung und Überlaufverbergung.

Begründung für die Einrichtung von BFCs mit nicht sichtbarem Überlauf

Die primäre Der Grund für dieses Verhalten liegt in der Notwendigkeit, in bestimmten Szenarien ein reibungsloses Scrollen sicherzustellen. Wenn ein Container mit überlaufendem Inhalt scrollbar ist, müsste der Browser den Inhalt beim Scrollen des Benutzers ständig um die Floats herumwickeln, damit sich Floats mit diesem Inhalt überschneiden können. Dieser Umbruchvorgang würde sich stark auf die Scrollleistung auswirken.

Auswirkung auf das Layout bei nicht sichtbarem Überlauf

Wenn ein Element mit nicht sichtbarem Überlauf einen BFC einrichtet, wird das gesamte Element wird beiseite geschoben, um Platz für alle schwebenden Elemente im gleichen Blockformatierungskontext zu machen. Dieses Verhalten verhindert die Überlappung der Randbox des Elements mit den Randboxen von Floats und sorgt so für ein korrektes Layout.

Streckung von Elementen mit Höhe: Automatischer und nicht sichtbarer Überlauf

CSS2.1 führte eine zusätzliche Änderung ein, durch die ein Element mit height: auto und einem nicht sichtbaren Überlauf vertikal gestreckt wird, um der Höhe seiner Floats zu entsprechen. Durch diese Änderung können solche Elemente ihren schwebenden Inhalt vollständig enthalten, ohne dass sie abgeschnitten werden.

Ausnahmen beim Überlaufverhalten

Trotz der allgemeinen Regel, einen neuen BFC mit nicht sichtbarem Überlauf einzurichten , es gibt Ausnahmen:

• Wenn das Element eine feste Höhe hat, wird der Schwimmer in den Behälter eingeclipst und das Element tut es nicht strecken.
• Wenn auf das Element „clear: left“ oder „clear:“ beide angewendet wurden, wird es vertikal verschoben, unabhängig davon, ob es einen nicht sichtbaren Überlauf hat oder nicht.

Fazit

Die Entscheidung, in CSS2.1 neue Blockformatierungskontexte mit nicht sichtbaren Überlaufwerten einzurichten, war in erster Linie auf die Notwendigkeit einer Verbesserung zurückzuführen Scrollleistung und sorgen für ein konsistentes Layout bei Vorhandensein von Floats. Dieses Verhalten sorgt zusammen mit der zusätzlichen Änderung in Bezug auf Elemente mit Höhe: automatisch und nicht sichtbarem Überlauf für ein robusteres und vorhersehbareres Layoutmodell.

Das obige ist der detaillierte Inhalt vonWie erstellt ein nicht sichtbarer Überlauf in CSS2.1 Blockformatierungskontexte und wirkt sich auf das Layout aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!