Lösung für das CSS-Höhenkollapsproblem

1. Hoher Einsturzgrad

Im Dokumentfluss wird die Höhe des übergeordneten Elements standardmäßig durch das untergeordnete Element erweitert, d. h. die Höhe des übergeordneten Elements ist gleich der Höhe des untergeordneten Elements. Wenn für ein untergeordnetes Element jedoch die Floating-Funktion festgelegt ist, befindet sich das untergeordnete Element vollständig außerhalb des Dokumentflusses. Zu diesem Zeitpunkt kann das untergeordnete Element die Höhe des übergeordneten Elements nicht unterstützen, was dazu führt, dass die Höhe des übergeordneten Elements zusammenbricht.

Da die Höhe des übergeordneten Elements zusammenbricht, werden alle Elemente unter dem übergeordneten Element nach oben verschoben, was zu einem chaotischen Seitenlayout führt.
Daher müssen wir das Problem des Höheneinbruchs während der Entwicklung vermeiden.

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Titel</title>
    <style type="text/css">
    .box1{
        Rand: 10px durchgehend rot;
    }
    </Stil>
</Kopf>
<Text>
<div Klasse="Box1">
    <div Klasse="box2">eine</div>
</div>
</body>
</html>

Ergebnis: Die Höhe des Elternelements box1 wird um den Inhalt des Kindelements box2a erweitert.

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Titel</title>
    <style type="text/css">
    .box1{
        Rand: 10px durchgehend rot;
    }
    .box2{
        Breite: 100px;
        Höhe: 100px;
        Hintergrundfarbe: grüngelb;
    }

    </Stil>
</Kopf>
<Text>
<div Klasse="Box1">
    <div Klasse="box2">ein</div>
</div>
</body>
</html>

Ergebnis: Die Höhe des übergeordneten Elements wird um die Höhe des untergeordneten Elements (100) gestreckt.

Wenn Sie Float für ein untergeordnetes Element festlegen:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Titel</title>
    <style type="text/css">
    .box1{
        Rand: 10px durchgehend rot;
    }
    .box2{
        Breite: 100px;
        Höhe: 100px;
        Hintergrundfarbe: grüngelb;
        schweben: links;
    }
    .Fußzeile{
        Höhe: 50px;
        Hintergrundfarbe: rosa;
    }
    </Stil>
</Kopf>
<Text>
<div Klasse="Box1">
    <div Klasse="box2"></div>
</div>
<div Klasse="Fußzeile"></div>
</body>
</html>

Ergebnis: Das untergeordnete Element schwebt und das übergeordnete Element hat keine Höhe. Der Fußbereich wandert nach oben.

Legen Sie die Höhe des übergeordneten Elements fest, um ein Zusammenfallen zu vermeiden:

.box1{
        Rand: 10px durchgehend rot;
        Höhe: 100px;/* Höhe des übergeordneten Elements festlegen*/
    }

Ergebnis:

Wenn die Höhe des untergeordneten Elements jedoch zu groß ist, treten Überlaufprobleme auf. Sobald die Höhe des übergeordneten Elements festgelegt ist, passt sich die Höhe des übergeordneten Elements nicht automatisch an die Höhe des untergeordneten Elements an. Daher wird diese Lösung nicht empfohlen:

  .box2{
        Breite: 100px;
        Höhe: 200px;
        Hintergrundfarbe: grüngelb;
        schweben: links;
    }

Ergebnis:

2. Lösen Sie das Kollapsproblem

Gemäß dem W3C-Standard haben alle Elemente auf der Seite ein implizites Attribut namens Block Formatting Context oder kurz BFC. Diese Eigenschaft kann aktiviert oder deaktiviert werden und ist standardmäßig deaktiviert.
Wenn der BFC eines Elements eingeschaltet ist, hat das Element die folgenden Eigenschaften:
(1) Die vertikalen Ränder des übergeordneten Elements überlappen sich nicht mit denen der untergeordneten Elemente.
(2) Elemente, die BFC ermöglichen, werden nicht durch schwebende Elemente verdeckt
(3) Elemente, die BFC ermöglichen, können schwebende Unterelemente enthalten

So aktivieren Sie den BFC eines Elements:

Element auf Float setzen

Obwohl diese Methode das übergeordnete Element erweitern kann, geht dadurch die Breite des übergeordneten Elements verloren. Darüber hinaus bewirkt diese Methode auch, dass die unteren Elemente nach oben verschoben werden, was das Problem nicht lösen kann.

Setzt das Element auf absolute Positionierung

Es gibt auch die oben genannten Probleme

Setzen Sie das Element auf Inline-Block

Dadurch kann das Problem zwar gelöst werden, es kommt jedoch zu einem Breitenverlust und ist daher nicht zu empfehlen.

Setzen Sie den Überlauf des Elements auf einen nicht sichtbaren Wert

Empfohlene Methode: Durch das Setzen des Überlaufs des übergeordneten Elements auf „Versteckt“ aktivieren Sie BFC mit den geringsten Nebenwirkungen.

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Titel</title>
    <style type="text/css">
    .box1{
        Rand: 10px durchgehend rot;
        Überlauf: versteckt;
    }
    .box2{
        Breite: 100px;
        Höhe: 100px;
        Hintergrundfarbe: grüngelb;
        schweben: links;
    }
    .Fußzeile{
        Höhe: 50px;
        Hintergrundfarbe: rosa;
    }
    </Stil>
</Kopf>
<Text>
<div Klasse="Box1">
    <div Klasse="box2"></div>
</div>
<div Klasse="Fußzeile"></div>
</body>
</html>

Ergebnis:

Hinweis: BFC wird in IE6 jedoch nicht unterstützt. Daher wird hasLayout eingeführt.

In IE6 gibt es eine weitere implizite Eigenschaft namens hasLayout, die eine ähnliche Funktion wie BFC hat, sodass der IE6-Browser das Problem lösen kann, indem er hasLayout aktiviert. Es gibt viele Möglichkeiten, es zu aktivieren, aber die Methode mit den geringsten Nebenwirkungen ist: Setzen Sie den Zoom des Elements einfach auf 1.

Zoom bedeutet „vergrößern“ und wird gefolgt von einer Zahl. Die Zahl, die Sie eingeben, gibt an, wie oft das Element vergrößert wird.

zoom:1 bedeutet, dass das Element nicht vergrößert werden soll, aber hasLayout kann über diesen Stil aktiviert werden.

Der Zoom-Stil wird nur im Internet Explorer und nicht in anderen Browsern unterstützt.

Zoom: 1;/* kompatibel mit ie6*/
Überlauf: versteckt;/* Kompatibel mit Nicht-IE6*/

Dies ist das Ende dieses Artikels über die Lösung des CSS-Höhenkollapsproblems. Weitere relevante CSS-Höhenkollapsinhalte finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<: Detaillierte Beschreibung der Funktion von meta name="" content="

>>: Eine kurze Analyse, wie MySQL die Transaktionsisolierung implementiert

Detaillierte Erklärung und Erweiterung von ref und reactive in Vue3

Lösung für das CSS-Höhenkollapsproblem

Detaillierte Erklärung und Erweiterung von ref und reactive in Vue3

Miniprogramm Benutzerdefinierte TabBar-Komponentenkapselung

Ausführen von PostgreSQL in Docker und Empfehlung verschiedener Verbindungstools

Verwenden Sie CSS-Mischmodi und SVG, um die Farbe Ihrer Produktbilder dynamisch zu ändern

JavaScript implementiert Konstellationsabfragefunktion mit detailliertem Code

MySQL-Datenoperation – Verwendung von DML-Anweisungen

Installationshandbuch für VMware Workstation 15 Pro (für Anfänger)

So verwenden Sie JS zum Parsen des Excel-Inhalts in der Zwischenablage

Ein sehr ausführliches Tutorial zur Installation von rocketmq unter Docker Desktop

Vue3.0+vite2 implementiert dynamisches asynchrones Lazy Loading von Komponenten

Artikel empfehlen

So verwenden Sie ECharts in WeChat Mini-Programmen mit uniapp

Beispiel für HTML-Abschirmung des Rechtsklickmenüs und der Linksklick-Eingabefunktion

Das WeChat-Applet implementiert den Serveraufbau des Benutzeranmeldemoduls

Detaillierte Erläuterung der Konvertierung von JavaScript-Objekten in primitive Werte

Wie überwacht und erhält Zabbix Netzwerkgerätedaten über SSH?

Detaillierte Erläuterung des Prozesses der Zabbix-Überwachung von SQLServer

Detaillierte Erklärung, wie MySQL Phantom-Lesevorgänge löst

Standards zum Schreiben von Codekommentaren bei der Webseitenerstellung

So erstellen Sie eine virtuelle Maschine mit Vagrant+VirtualBox

Methode zum Schreiben von bedingten Kommentaren und Beispielcode

Führen Sie die folgenden Schritte aus, damit Docker Images abrufen kann

Detaillierte Erläuterung der MySQL-Remoteverbindungsberechtigung

Detaillierte Erklärung des gesamten Prozesses zum Erstellen eines persönlichen Blogs mit nginx+WordPress

Webseiten-Erlebnis: Farbabstimmung für Webseiten

Verwenden von Openlayer in Vue, um einen Ladeanimationseffekt zu realisieren