Wie löst „overflow: auto' Probleme mit der Float-Anzeige?

Warum Überlauf: Probleme mit der Float-Anzeige werden automatisch behoben

Beim Erstellen mehrerer Spalten mit Floating-Elementen tritt häufig das Problem auf, dass der übergeordnete Wrapper dies nicht tut Erweitern Sie es, um es an die schwebenden Kinder anzupassen. Dies liegt daran, dass Floats aus dem regulären Inhaltsfluss entfernt werden, was dazu führt, dass der Wrapper ihre Existenz ignoriert.

Um dieses Problem zu beheben, kann overflow: auto auf den Wrapper angewendet werden. Diese Technik erstellt einen neuen Blockformatierungskontext (BFC) für die Floats und zwingt den Wrapper, sie aufzunehmen. BFCs legen Grenzen fest, die verhindern, dass Floats andere Elemente in ihrem übergeordneten Kontext beeinträchtigen.

Es ist wichtig zu beachten, dass overflow: auto Floats nicht „löscht“, da für das Löschen ein dediziertes Löschelement nach dem letzten Float-Element erforderlich ist. Ein übergeordnetes Element kann seine eigenen schwebenden untergeordneten Elemente nicht löschen.

Overflow: auto erstellt einen BFC, indem es die folgenden Kriterien erfüllt:

1. Das Element verfügt über eine Überlaufeigenschaft (z. B. overflow: auto) .
2. Das Element ist nicht statisch positioniert (Position: statisch).

Durch die Erfüllung dieser Bedingungen erstellt das Wrapper-Element einen BFC, der die schwebenden untergeordneten Elemente dazu zwingt, innerhalb seiner Grenzen zu bleiben, und so eine ordnungsgemäße Höhenanpassung zur Aufnahme der schwebenden Spalten gewährleistet.

Das obige ist der detaillierte Inhalt vonWie löst „overflow: auto' Probleme mit der Float-Anzeige?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!