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!