Warum erweitert „overflow:hidden' die Höhe eines übergeordneten Elements mit schwebenden untergeordneten Elementen?

Überlauf: Ausgeblendet und Elementhöhenerweiterung mit schwebenden untergeordneten Elementen

In einer überraschenden Wendung kann die Einstellung „Überlauf: Ausgeblendet“ auf einem äußeren Element dazu führen um in der Höhe zu wachsen, um schwebende untergeordnete Elemente aufzunehmen. Um zu verstehen, warum das so ist, schauen wir uns das Konzept der Blockformatierungskontexte genauer an.

Wenn ein Blockelement gefunden wird, dessen Überlauf auf einen nicht sichtbaren Wert (z. B. ausgeblendet) gesetzt ist, wird ein neuer Blockformatierungskontext erstellt. Entscheidend ist, dass von Blockformatierungskontextwurzeln (wie diese Elemente genannt werden) erwartet wird, dass sie sich vertikal ausdehnen, um ihre schwebenden Nachkommen aufzunehmen, wenn für sie keine explizite Höhe festgelegt ist.

Dieses Verhalten ist auf eine in CSS2 eingeführte Überarbeitung zurückzuführen. 1, um ein anderes Problem anzusprechen. Durch die Änderung wurde das Konzept des Freiraums, bei dem die Unterkante eines Floats von seinem umschließenden Block (übergeordneten Block) enthalten ist, effektiv erweitert, um es auf Blockformatierungskontextwurzeln ohne angegebene Höhe anzuwenden.

Im bereitgestellten Beispiel das äußere Element ist auf overflow:hidden gesetzt, was die Erstellung eines neuen Blockformatierungskontexts auslöst. Da das äußere Element keine festgelegte Höhe hat, ist es standardmäßig auf „Automatisch“ eingestellt und dehnt sich nach unten, um die schwebenden inneren Elemente einzuschließen.

Es ist wichtig, dieses Phänomen vom Schwimmspiel zu unterscheiden. Ein Freiraum tritt auf, wenn ein Element mit den vorangehenden Kräften klar: beides oder einem ähnlichen Effekt an der Oberseite des Behälters schwimmt. Im Gegensatz dazu erfolgt das Überlaufen eines Blockformatierungskontextstamms, der Gleitkommazahlen enthält, nur innerhalb dieses Kontexts und hat keine Auswirkungen auf Elemente außerhalb dieses Kontexts.

Das obige ist der detaillierte Inhalt vonWarum erweitert „overflow:hidden' die Höhe eines übergeordneten Elements mit schwebenden untergeordneten Elementen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!