Warum verursacht „overflow: versteckt' ein unerwartetes Höhenwachstum in Containern mit schwebenden Elementen?

Überlauf: Verstecktes und unerwartetes Höhenwachstum schwebender Elemente

Frage:
Wenn Überlauf: versteckt ist Wenn man es auf ein äußeres Element anwendet, das schwebende Elemente enthält, warum wächst das äußere Element unerwartet in der Höhe, um es zu enthalten? sie?

Antwort:
Das unerwartete Höhenwachstum entsteht, weil overflow:hidden einen neuen Blockformatierungskontext (BFC) erstellt. BFC-Wurzeln, die Elemente mit nicht sichtbarem Überlauf enthalten, erweitern ihre Höhe, um Floats aufzunehmen, wenn sie keine bestimmte Höhe haben.

Gemäß der CSS-Spezifikation werden Blockformatierungskontextwurzeln „gedehnt, um sie zu enthalten“. ihre Floats werden nach Höhe sortiert, wenn sie selbst keine bestimmte Höhe haben, standardmäßig wird „Auto“ verwendet. Diese Höhenerhöhung gilt auch für schwebende Nachkommen, deren untere Randkante die untere Inhaltskante des BFC-Stamms überschreitet.

Unterschied zum Löschen von Floats
Beachten Sie, dass sich dieses Verhalten von der Float-Freigabe unterscheidet, die nur Tritt auf, wenn die Clear-Eigenschaft angewendet wird und vorhergehende Floats gelöscht werden müssen. In diesem Fall:

• Die Verwendung von „clear: Both“ auf einem Element außerhalb der BFC-Wurzel löscht die Floats, führt jedoch nicht zu einer Dehnung des äußeren Elements.
• Platzieren eines Elements mit der Höhe Null mit klar: Sowohl innerhalb der BFC-Wurzel sorgt dafür, dass sich das äußere Element nach unten erstreckt, um die Unterkante der schwebenden Elemente aufzunehmen (bekannt als „Clearfix“).

Das obige ist der detaillierte Inhalt vonWarum verursacht „overflow: versteckt' ein unerwartetes Höhenwachstum in Containern mit schwebenden Elementen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!