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

js-Simulation, um den Effekt der Bildvergrößerung auf der Jingdong-Detailseite zu erzielen

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

js-Simulation, um den Effekt der Bildvergrößerung auf der Jingdong-Detailseite zu erzielen

Eine kurze Diskussion über die richtige Haltung der Tomcat-Speicherkonfiguration

Detaillierte Erklärung der MySQL-Dreiwertelogik und NULL

Implementierungscode der Front-End-HTML-Skin-Änderungsfunktion

Analyse der MySQL-Methode zum Exportieren nach Excel

Modularität in Node.js, npm-Paketmanager erklärt

HTML-Grundstruktur_Powernode Java Academy

HTML verwendet Canvas, um die Bullet-Screen-Funktion zu implementieren

Detaillierte Analyse von Homologie und Domänenübergreifendkeit, JSONP (Funktionskapselung), CORS-Prinzip

html Option deaktivieren auswählen auswählen deaktivieren Option Beispiel

Artikel empfehlen

Implementierung der MySQL-Tabellenlöschoperation (Unterschiede zwischen Löschen, Abschneiden und Löschen)

Navicat-Remoteverbindung zur MySQL-Implementierungsschritteanalyse

MySQL-Kodierung utf8 und utf8mb4 utf8mb4_unicode_ci und utf8mb4_general_ci

Die gleichzeitige Ausführung unter Linux ist einfach. Gehen Sie dazu einfach wie folgt vor

Die neueste Sammlung von 18 Webdesign-Arbeiten im grünen Stil

JavaScript Canvas zeichnet dynamische Drahtgittereffekte

Detaillierte Erläuterung der Verwendung des Baidu-Stils in Eslint im React-Projekt

So richten Sie die passwortfreie SSH-Anmeldung beim Linux-Server ein

Verwenden Sie das Docker-Buildkit, um ein Docker-Image zu erstellen, das auf dem Raspberry Pi verwendet werden kann

Eine kurze Diskussion über die Simulation von Multithread- und Multiprozess-Abstürzen in Linux

MySQL-Export ganzer oder einzelner Tabellendaten

Zwei Möglichkeiten zum korrekten Bereinigen von MySQL-Binlog-Protokollen

vue realisiert die Anpassung der Spaltenbreite von el-table perfekt

Detaillierte Erklärung dieses Zeigeproblems in der JavaScript-Funktion

HTML+CSS+JS zur Implementierung des Spiels „Nicht auf das Whiteboard treten“