Warum verwendet CSS2.1 einen anderen „Überlauf' als „sichtbar', um Blockformatierungskontexte zu erstellen?

Warum schreibt CSS2.1 andere Überlaufwerte als „sichtbar“ vor, um einen neuen Blockformatierungskontext einzurichten?

In CSS2.1 Andere Überlaufwerte als „sichtbar“ werden angegeben, um einen neuen „Blockformatierungskontext“ zu erstellen. Diese Entscheidung hat Fragen zum Grundgedanken hinter der Kombination zweier scheinbar unabhängiger Funktionen aufgeworfen: der Erstellung eines Blockformatierungskontexts (BFC) und der Unterdrückung von Überläufen.

Historischer Kontext und wichtige Überlegungen

Anfragen auf der CSS-Mailingliste zufolge ergibt sich diese Entscheidung aus der Notwendigkeit, das Scrollen innerhalb von Boxen zu berücksichtigen, die sich mit Floats überschneiden. Die ursprüngliche CSS 2.0-Spezifikation erforderte, dass Browser beim Scrollen Inhalte um eindringende Floats herum neu umschließen mussten, was zu Leistungsproblemen führte.

Die CSS2.1-Änderung verhindert dieses Umbrechen, indem sie einen neuen BFC für andere Überlaufwerte als „sichtbar“ einrichtet. Dadurch wird sichergestellt, dass:

• Inhalte im neuen BFC nicht durch Floats beeinflusst werden.
• Das Scrollverhalten des BFC wird durch das Vorhandensein von Floats nicht beeinflusst.

Beispiel

Bedenken Sie Folgendes Beispiel:

<div>...</div>
<div>
  ...:
  ...:
</div>

div {
  height: 80px;
}

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

In CSS 2.0 überlappt das zweite Feld mit overflow: sichtbar (Standard) das schwebende Element. Mit overflow: auto (CSS 2.1) erhält die zweite Box jedoch einen neuen BFC, wodurch verhindert wird, dass der Float seinen Inhalt überschneidet.

Auswirkungen von Overflow: Hidden

Obwohl Overflow: Hidden normalerweise überlaufenden Inhalt verbirgt, ermöglicht es dennoch programmatisches Scrollen. Dies ist wichtig, da Boxen mit overflow:hidden, die sich überschneidende Floats enthalten, ebenfalls einen neuen BFC einrichten müssen, um ein Umbrechen beim Scrollen zu verhindern.

Änderungen in CSS2.1 eingeführt

CSS2 .1 führt zusätzliche Änderungen ein:

• Kontextstammelemente für die Formatierung blockieren (Elemente mit Überlauf). Andere Werte als „sichtbar“) erstrecken sich jetzt vertikal bis zur Höhe ihrer Floats.
• Boxen mit „overflow: versteckt“ und „height: auto“ sind durch die Grenzen ihres Containers eingeschränkt und können Floats nicht mehr schneiden.

Konsistenz und Leistung

Letztendlich die Entscheidung, einen neuen BFC für den Überlauf zu erstellen Andere Werte als „sichtbar“ wurden in erster Linie durch Leistungsüberlegungen und den Wunsch nach Konsistenz beim Umgang mit überfüllten Inhalten bestimmt. Dieser Ansatz optimiert die Scrollleistung und sorgt für ein vorhersehbares Layout.

Das obige ist der detaillierte Inhalt vonWarum verwendet CSS2.1 einen anderen „Überlauf' als „sichtbar', um Blockformatierungskontexte zu erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!