Was ist CSS-Höhenkollaps?

Im Dokumentenfluss wird die Höhe des übergeordneten Elements standardmäßig um die untergeordneten Elemente erweitert, dh die Höhe des untergeordneten Elements entspricht der Höhe des übergeordneten Elements. Wenn das untergeordnete Element jedoch auf Float eingestellt ist, wird das untergeordnete Element vollständig vom Dokumentfluss getrennt. Zu diesem Zeitpunkt kann das untergeordnete Element die Höhe des übergeordneten Elements nicht unterstützen, wodurch die Höhe des übergeordneten Elements verringert wird zusammenbrechen.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, CSS3-Version, Dell G3-Computer.

Wenn das übergeordnete Element nur schwebende Elemente enthält und das übergeordnete Element keine Höhe und Breite festlegt, wird seine Höhe auf Null reduziert, was der sogenannten „Höhenkollaps“ entspricht.

Wenn das übergeordnete Element einen Hintergrund oder Rahmen enthält, sieht das überlaufende Element nicht wie ein Teil des übergeordneten Elements aus.

Methoden zur Lösung des Problems „Höhenkollaps“:

Option 1: Dem übergeordneten Element eine feste Höhe geben

Nachteile: Dem übergeordneten Element eine feste Höhe zu geben, verstößt gegen das Prinzip der Höhenanpassung Nicht flexibel genug und nicht zu empfehlen.

Option 2: Attributüberlauf hinzufügen: versteckt;

Vorteile: gute Browserunterstützung und Einfachheit;

Nachteil: Wenn das untergeordnete Element ein Positionierungsattribut hat, werden Teile außerhalb des Containers ausgeschnitten .

[Empfohlenes Tutorial: CSS-Video-Tutorial]

Option 3: Fügen Sie am Ende des untergeordneten Elements ein leeres p hinzu und legen Sie den Stil unten fest

div{
clear: both;
height: 0;
overflow: hidden;
}

Vorteile: Alle Browser unterstützen es und ein Containerüberlauf wird nicht unterstützt passieren Abgeschnitten;
Nachteile: Das Hinzufügen bedeutungsloser Divs zur Seite kann leicht zu Coderedundanz führen.

Option 4: Universelle Clear Float-Methode

Fügen Sie am Ende des Inhalts im übergeordneten Element ein Pseudoelement hinzu, um die Funktion der dritten Option zu realisieren. Der spezifische Einstellungsstil ist wie folgt:

Übergeordnetes Element:

after{
content: "";
height: 0;
    clear: both;
display: block;
}

Vorteile: Nein. Es verursacht Code-Redundanz und optimiert die Leistung des verbleibenden Codes. Es wird empfohlen, es zu verwenden.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Programmiervideos! !

Das obige ist der detaillierte Inhalt vonWas ist CSS-Höhenkollaps?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!