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

Zusammenfassung der Wissenspunkte zu Null in der MySQL-Datenbank

Lösen Sie das Fehlerproblem von Warnungen, die möglicherweise mit der Option „--fix“ behoben werden können, wenn Sie ein Vue-Projekt ausführen

Artikel

Detaillierter Code zur Implementierung einer 3D-Tag-Cloud in Vue

Artikel

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

Zusammenfassung der Wissenspunkte zu Null in der MySQL-Datenbank

Wann ist die Verwendung von dl, dt und dd sinnvoll?

Div in HTML ausblenden Tabelle ausblenden TABLE- oder DIV-Inhalt im CSS-Stil

Beispielcode zum Erzielen eines Aushöhlungseffekts mit reinem CSS

So entschlüsseln Sie Linux-Versionsinformationen

Detaillierte Erklärung des "/"-Problems, wenn proxy_pass gemäß dem Pfad weiterleitet

Detaillierte Erläuterung der häufig verwendeten integrierten Anweisungen von Vue

Verwenden Sie Tomcat, um das SpringBoot-War-Paket in einer CentOS-Umgebung bereitzustellen

Lösen Sie das Fehlerproblem von Warnungen, die möglicherweise mit der Option „--fix“ behoben werden können, wenn Sie ein Vue-Projekt ausführen

Detaillierter Code zur Implementierung einer 3D-Tag-Cloud in Vue

Artikel empfehlen

6 Vererbungsmethoden von JS Advanced ES6

Grafisches Tutorial zur Installation und Konfiguration von mysql8.0.11 winx64 (win10)

Docker-Dateispeicherpfad, Befehlsvorgang zum Starten des Containers abrufen

Sind Sie immer noch Select *?

Detaillierte Erklärung der Vue-Filter

Lösen Sie das Problem, dass der Standardwert des CSS3-Übergangsverzögerungsattributs 0 ohne Einheit ist und ungültig ist

Vue3.0 handgeschriebener Karusselleffekt

Bootstrap3.0-Studiennotizentabelle bezogen auf

So erreichen Sie die maximale Anzahl von Verbindungen in MySQL

Detaillierte Erklärung zur Verwendung von Zabbix zur Überwachung der Oracle-Datenbank

So installieren Sie Oracle Java 14 auf Ubuntu Linux

Grafisches Tutorial zur Installation der dekomprimierten Version von mysql5.7.14

Schritte zur Installation von Pyenv unter Deepin

Problemanalyse der Verwendung einer Idee zum Erstellen eines Springboot-Initialisiererservers

Informationen zum Fallstrickprotokoll der Vue3-Übergangsanimation