Wie löscht „overflow: auto' Floats auf magische Weise und löst Höhenprobleme?

Überlauf: Auto Magic: Floats löschen und Höhenprobleme lösen

Ihr Dilemma ergibt sich aus dem Standardverhalten von Float-Elementen, die aus entfernt werden den Standard-Layoutfluss, was dazu führt, dass sich die Höhe des enthaltenden Elements abnormal verhält.

Warum Überlauf: Auto streckt Wrapper

Überlauf: Auto löscht Floats nicht direkt; Stattdessen wird ein neuer Blockformatierungskontext (BFC) für das Wrapper-Element erstellt. Dieser BFC hat die folgenden Auswirkungen:

• Verhindert, dass schwimmende Kinder aus dem Wrapper entkommen.
• Zwingt den Wrapper, eine Höhe festzulegen, um seine Floats aufzunehmen.

Diese Eindämmung ermöglicht es der Hülle, sich auszudehnen und um die schwebenden Säulen herum zu passen, wodurch die Höhe festgelegt wird Problem.

Warum benötigen Sie Clear Floats?

Floatierte Elemente sind nur vom normalen Fluss innerhalb ihres übergeordneten Elements ausgenommen. Wenn Sie Inhalte unterhalb eines Floats in eine eigene Zeile verschieben möchten, benötigen Sie ein zusätzliches Element, ein sogenanntes „clear“-Element. Dieses Element hat den expliziten Zweck, den verbleibenden Platz nach dem Float zu löschen und eine neue Zeile zu beginnen.

In Ihrem Beispiel erstellt overflow: auto einen BFC, der effektiv die Floats enthält. Wenn Sie jedoch andere Elemente nach den Floats haben, fließen diese möglicherweise nicht korrekt ohne ein explizites Clear-Element.

Das obige ist der detaillierte Inhalt vonWie löscht „overflow: auto' Floats auf magische Weise und löst Höhenprobleme?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!