CSS-Clear-Float-Kompatibilitätsmethode

Dieses Mal werde ich Ihnen die Kompatibilitätsmethode von CSS vorstellenClear FloatFloat, was sind die Vorsichtsmaßnahmen der CSS Clear Float Float-Kompatibilität Methode, das Folgende ist ein praktischer Fall, lassen Sie uns Kommt zusammen Schaut mal rein.

Wir müssen zwei wichtige Definitionen verstehen, bevor wir Floats löschen:

Die Definition von Float: das Element aus dem Dokumentenfluss ausbrechen lassen, sich in die angegebene Richtung bewegen, und auf die Grenzen der übergeordneten Ebene oder angrenzende schwebende Elemente stoßen, werden gestoppt.

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 zum Löschen von Floats sind wie folgt:

1. Clear Clear Floats (leere P-Methode hinzufügen)

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

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

2 Methode: Legen Sie die Höhe des übergeordneten Elements des schwebenden Elements fest

Wir wissen, dass der Höheneinbruch durch die adaptive Höhe des übergeordneten Elements des schwebenden Elements verursacht wird, daher 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 unsicher 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 klares Attribut, das dem Hinzufügen eines leeren p entspricht.

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, um kompatibel zu sein mit IE6 muss 7 auch mit Zoom verwendet werden. Zum Beispiel:

Zu beachtende Dinge:

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

Nach der Pseudoklasse: Fügen Sie am Ende des Elements Inhalte hinzu >

:after{content "added content";} Inkompatibel unter IE6 und 7

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

zoom zoom

a Trigger haslayout unter IE, sodass das Element Breite und Höhe basierend auf seinem berechnet eigene Inhalte. b. FF wird nicht unterstützt;

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Ausführliche Erklärung der Verwendung von „Focus-within“

Detaillierte Erklärung der Verwendung von Pseudo- Elemente::before und ::after

Das obige ist der detaillierte Inhalt vonCSS-Clear-Float-Kompatibilitätsmethode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!