Fassen Sie verschiedene Methoden zum Löschen von Floats in CSS und den Umgang mit Kompatibilität zusammen

In diesem Artikel wird hauptsächlich die Zusammenfassung und Kompatibilitätsbehandlung von sieben gängigen Methoden zum Löschen von Floating Float in CSS vorgestellt. Es ist von großem praktischem Wert. Freunde in Not können sich darauf beziehen.

Wir müssen vorher zwei Dinge verstehen Clearing Float. Eine wichtige Definition:

Die Definition von Floating : bewirkt, dass das Element aus dem Dokumentfluss ausbricht, sich in die angegebene Richtung bewegt und anhält, wenn es auf die übergeordnete Grenze oder angrenzende Elemente trifft schwebende Elemente.

Höhenreduzierung: Die Höhe des übergeordneten Elements des schwebenden Elements ist adaptiv (wenn das übergeordnete Element keine Höhe schreibt und das untergeordnete Element schweben schreibt, ist die Höhe des übergeordneten Elements Element wird zusammenbrechen)

Nachdem wir Floats kennen und wissen, warum sie gelöscht werden sollten, können wir beginnen zu lernen, wie man Floats löscht. Zu diesem Zeitpunkt müssen wir das Attribut „clear of floats“ verwenden,
clear: left | right |. none |. inherit: eine bestimmte Richtung des Elements. Es dürfen keine schwebenden Elemente auf der linken und rechten Seite vorhanden sein.

Die Hauptmethoden des Clear Floating sind wie folgt:

1. Clear Clear Float (leeres P-Verfahren hinzufügen)

Fügen Sie ein leeres p unter dem schwebenden Element hinzu und schreiben Sie den CSS-Stil in das Element:

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

2. Methode: Geben Sie float Legen Sie die Höhe des übergeordneten Elements fest

Wir wissen, dass der Höhenkollaps durch die adaptive Höhe des übergeordneten Elements des schwebenden Elements verursacht wird. Dann können wir dieses Problem lösen, indem wir eine geeignete Höhe dafür festlegen. .

Nachteile: Nicht anwendbar, wenn die Höhe des schwebenden Elements ungewiss ist

3. Methode: float (übergeordnetes Element schwebt gleichzeitig)

Was bedeutet „von schweben zu schweben“? Das heißt, das übergeordnete Element des schwebenden Elements ebenfalls schweben zu lassen.

Nachteile: Sie müssen Floats zum übergeordneten Element jedes Floating-Elements hinzufügen. Zu viele Floats können leicht zu Problemen führen.

4. Methode: Setzen Sie das übergeordnete Element auf Inline-Block

Nachteile: Der linke und rechte Rand des übergeordneten Elements sind ungültig und können nicht verwendet werden ; zentriert

5. br clear float

<p class="box">
    <p class="top"></p>
    <br clear="both" />
</p>

br-Tag hat sein eigenes Clear-Attribut, setzen Sie es auf beides Fügen Sie ein leeres p hinzu. Das Prinzip ist das gleiche.

Problem: Es erfüllt nicht die Anforderungen der Trennung von Struktur, Stil und Verhalten bei der Arbeit.

6. overflow:hidden clear float method to the parent;

7. Universelle Clearing-Methode nach Pseudo-Klassen-Clear-Floating (jetzt die Mainstream-Methode, empfohlen)

overflow: hidden;
*zoom: 1;

Gleichzeitig muss es zur Kompatibilität mit IE6 und 7 auch mit Zoom verwendet werden. Zum Beispiel:

选择符:after{
            content:".";
            clear:both;
            display:block;
            height:0;
            overflow:hidden;
            visibility:hidden;
              }

Wichtige Dinge:

after pseudo-class: inside the element Fügen Sie am Ende Inhalt hinzu

.clear:after{content:'';display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}
.clear{zoom:1;}

:after{content"added content";} IE6, 7 ist nicht kompatibel

Zoom Zoom

a. Haslayout unter IE auslösen, damit das Element Breite und Höhe basierend auf seinem eigenen Inhalt berechnet. b. FF wird nicht unterstützt;

Das obige ist der detaillierte Inhalt vonFassen Sie verschiedene Methoden zum Löschen von Floats in CSS und den Umgang mit Kompatibilität zusammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!