Warum bewirkt „overflow: auto', dass ein Container so erweitert wird, dass er in schwebende Elemente passt?

Warum erweitert „overflow: auto“ die Containerhöhe, um schwebende Elemente aufzunehmen?

Beim Implementieren eines zweispaltigen Layouts mit schwebenden Elementen Möglicherweise tritt ein Problem auf, bei dem der Container nicht vertikal erweitert wird, um an seine schwebenden untergeordneten Elemente zu passen. Das Hinzufügen von „overflow: auto“ zum Container löst dieses Problem.

Grundlegendes zu Floats

Float-Elemente werden außerhalb des regulären Dokumentflusses positioniert und scheinen neben anderen Elementen zu schweben . Daher ist sich der übergeordnete Container der Existenz schwebender Elemente nicht bewusst und berücksichtigt deren Höhe bei der Berechnung seiner eigenen Höhe nicht.

Abstand und Überlauf

Zum Erzwingen Damit der übergeordnete Container seine schwebenden untergeordneten Container aufnehmen kann, müssen Sie entweder die Floats löschen oder einen neuen Blockformatierungskontext (BFC) erstellen. Overflow: auto ist eine CSS-Eigenschaft, die einen neuen BFC erstellt.

Wie Overflow: Auto einen BFC erstellt

Overflow: auto erstellt einen BFC, indem bestimmte Bedingungen erfüllt werden, darunter :

• Erstellen eines neuen enthaltenden Blocks für die schwebenden Elemente
• Festlegen der Eigenschaft „overflow“ auf „auto“

Vorteile der Etablierung ein BFC

Durch die Einrichtung eines BFC geschieht Folgendes:

• Floatierte Elemente werden innerhalb des neuen enthaltenden Blocks eingeschränkt
• Der Container wird gezwungen, sich zu erweitern vertikal, um die schwebenden Kinder aufzunehmen

Hinweis zum Löschen von Floats

Überlauf: Automatisch löscht Floats nicht; es erstellt nur einen BFC. Um Floats zu löschen, müssen Sie nach den Float-Elementen ein Löschelement hinzufügen, z. B. ein Div mit dem Stil „clear: Both“. Ein übergeordnetes Element kann jedoch seine eigenen schwebenden untergeordneten Elemente nicht löschen.

Das obige ist der detaillierte Inhalt vonWarum bewirkt „overflow: auto', dass ein Container so erweitert wird, dass er in schwebende Elemente passt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!