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 :
Vorteile der Einrichtung eines BFC
Durch die Einrichtung eines BFC geschieht Folgendes:
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 erweitert „overflow: auto' einen Container, um ihn an schwebende Elemente anzupassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
