Ü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:
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!