Eine kurze Diskussion zum CSS-Höhenkollapsproblem

Leistung

Zum Beispiel:

HTML:

<div Klasse="Erste">
    <div Klasse="erstes-Kind1">erstes-Kind1</div>
    <div Klasse="erstes-Kind2">erstes-Kind2</div>
</div>
<div Klasse="zweite">
    zweite
</div>
<div Klasse="dritte">
    dritte
</div>

CSS:

.Erste{
    Breite: 300px;
    Hintergrundfarbe: rosa;
}
.erstes .erstes-Kind1,.erstes .erstes-Kind2{
    schweben: links;
    Breite: 100px;
    Höhe: 100px;
}
.erstes .erstes-Kind1{
    Hintergrundfarbe: lila;
    Rand rechts: 10px;
}
.erstes .erstes-Kind2{
    Hintergrundfarbe: rot;  
}
.zweite{
    Breite: 200px;
    Höhe: 150px;
    Hintergrundfarbe: blau;
}
.dritte{
    Breite: 100px;
    Höhe: 150px;
    Hintergrundfarbe: grün;
}

Es äußert sich wie folgt:

Ursachen

Wie aus dem obigen Beispiel ersichtlich, ist für die erste Box keine Höhe festgelegt und sie wird von den untergeordneten Elementen gestreckt. Da die untergeordnete Box jedoch auf Schweben eingestellt ist und sich außerhalb des Standardflusses befindet, hat die erste Box keine Höhe, was bedeutet, dass die zweite und dritte Box nach oben verschoben werden.

Als Gründe für den hohen Einbruch können folgende zusammengefasst werden:

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 das untergeordnete Element jedoch auf Float eingestellt ist, liegt es 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.

Lösungen für den Hochkollaps:

1. Legen Sie eine feste Höhe für das übergeordnete Element fest. Nach der Verwendung dieser Methode kann die Höhe des übergeordneten Elements jedoch nicht automatisch entsprechend dem untergeordneten Element erhöht werden. Sie können diese Methode entsprechend den Merkmalen Ihrer eigenen Seite verwenden, wenn die Höhe festgelegt werden kann. Andernfalls wird diese Methode nicht empfohlen.

2. Methode mit zusätzlichen Tags: Dies ist die vom W3C empfohlene Lösung, sie wird jedoch nicht empfohlen, da das Prinzip von HTML darin besteht, semantische Tags zu schreiben. Diese Methode fügt bedeutungslose Tags hinzu.

<div Klasse="Erste">
    <div Klasse="erstes-Kind1">erstes-Kind1</div>
    <div Klasse="erstes-Kind2">erstes-Kind2</div>
    <div style="clear: beide;"></div>
</div>

3. Overflow-Eigenschaft des übergeordneten Elements (öffnen Sie den BFC des Elements):

.clearfix{
    Überlauf: versteckt;
}

Bei dieser Methode kann der Attributwert beliebig unsichtbar sein (versteckt/automatisch/scrollen), aber „versteckt“ wird empfohlen.

Diese Methode hat weniger Nebenwirkungen. Diese Methode wird in IE6 nicht unterstützt. Sie können zoom: 1; hinzufügen.

.clearfix::nach{
    Inhalt: "";/*Der Inhalt des Pseudoelements ist leer*/
    Anzeige: Block;/*Nicht-Standard ist in Ordnung, es kann auch eine Tabelle usw. sein*/
    Höhe: 0;/*Die Höhe des Pseudoelements beträgt 0 und hat keinen Einfluss auf andere Elemente*/
    löschen: beide;/*Float löschen*/
    Sichtbarkeit: versteckt;/*Unsichtbar*/
}
.clearfix{
    zoom: 1;/*IE6-Elemente haben keinen BFC-Modus, aber dieser Code aktiviert den hasLayout-Modus in IE6, der nur in IE unterstützt wird*/
}

4. Löschen Sie den Float nach dem einzelnen Pseudoelement (schalten Sie den BFC des Elements ein):

.clearfix::nach{
    Inhalt: "";/*Der Inhalt des Pseudoelements ist leer*/
    Anzeige: Block;/*Nicht-Standard ist in Ordnung, es kann auch eine Tabelle usw. sein*/
    Höhe: 0;/*Die Höhe des Pseudoelements beträgt 0 und hat keinen Einfluss auf andere Elemente*/
    löschen: beide;/*Float löschen*/
    Sichtbarkeit: versteckt;/*Unsichtbar*/
}
.clearfix{
    zoom: 1;/*IE6-Elemente haben keinen BFC-Modus, aber dieser Code aktiviert den hasLayout-Modus in IE6, der nur in IE unterstützt wird*/
}

Diese Methode ist mittlerweile weit verbreitet. Viele große Websites verwenden diese Methode. Sie hat weniger Nebenwirkungen und muss nur mit IE6 verarbeitet werden.

5. Doppelte Pseudoelemente löschen Floating (BFC des offenen Elements):

.clearfix::vorher,.clearfix::nachher{
    Inhalt: "";
    Anzeige: Block;
    klar: beides;
}
.clearfix{
    zoom: 1;/*IE6-Elemente haben keinen BFC-Modus, aber dieser Code aktiviert den hasLayout-Modus in IE6, der nur in IE unterstützt wird*/
}

Dieser Ansatz ist umständlicher beim Schreiben und wird nicht empfohlen.

Der Effekt nach dem Entfernen des Einflusses des Schwebens auf das übergeordnete Element:

BFC-bezogen

Gemäß dem W3C-Standard verfügt jedes Element auf der Seite über ein implizites Attribut namens Block Formatting Context, kurz BFC. Dieses Attribut kann ein- oder ausgeschaltet werden und ist standardmäßig deaktiviert.

Wenn der BFC eines Elements eingeschaltet ist, hat das Element die folgenden Eigenschaften:

1. Der vertikale Rand des übergeordneten Elements überlappt sich nicht mit dem untergeordneten Element

2. Elemente mit aktiviertem BFC werden nicht von schwebenden Elementen verdeckt

3. Elemente mit aktiviertem BFC können schwebende Unterelemente enthalten

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.