Detaillierte CSS-Float-Einführung in clear:both

Zunächst müssen Sie wissen, dass p ein Element auf Blockebene ist. Es belegt eine exklusive Zeile auf der Seite und ist von oben nach unten angeordnet, was dem legendären Fluss entspricht.

Es ist ersichtlich, dass selbst wenn die Breite von p1 sehr klein ist, eine Zeile auf der Seite p1 und p2 aufnehmen kann und p2 nicht hinter p1 eingeordnet wird, da das p-Element ein Block ist -Ebene und belegt eine eigene Zeile. Beachten Sie, dass sich die obigen Theorien auf p im Standardfluss beziehen.
Egal wie komplex das Layout ist, der grundlegende Ausgangspunkt lautet: „So zeigen Sie mehrere p-Elemente in einer Zeile an“. Unter Floating kann man verstehen, dass sich ein bestimmtes p-Element vom Standard-Stream löst und auf dem Standard-Stream schwebt. Es befindet sich nicht auf derselben Ebene wie der Standard-Stream und wird daher als Float bezeichnet.
Angenommen, p2 in der obigen Abbildung schwebt, bricht es vom Standardfluss ab, aber p1, p3 und p4 befinden sich noch im Standardfluss, sodass sich p3 automatisch nach oben bewegt und die Position von p2 einnimmt und einen Flow neu organisieren. Wie im Bild gezeigt:

Wie aus dem Bild ersichtlich ist, gehört p2 nicht mehr zum Standardfluss, um p2 zu ersetzen, und p1. p3 und p4 werden nacheinander angeordnet. Und weil Float über dem Standardfluss schwebt, blockiert p2 einen Teil von p3 und p3 sieht „kurz“ aus.
Hier verwendet p2 den linken Float (float:left;), was als „Anordnen auf der linken Seite, Float on“ verstanden werden kann rechts (float:right;) natürlich rechts anordnen. Mit links und rechts ist hier der linke und rechte Rand der Seite gemeint.
Wenn wir p2 nach rechts verschieben, ist der Effekt wie folgt:

Zu diesem Zeitpunkt ist p2 am rechten Rand der Seite angeordnet und p3 ist nicht mehr blockiert Der Leser kann deutlich erkennen, dass P1, P3 und P4 aus Streams bestehen.
Bisher haben wir nur ein p-Element gefloated, wie wäre es mit mehr?
Als nächstes fügen wir sowohl p2 als auch p3 das linke Floating hinzu. Der Effekt ist wie folgt:

Da p2 und p3 ebenfalls floaten, gehören sie nicht mehr zum Standardfluss p4 wird automatisch nach oben verschoben und p1 bildet einen „neuen“ Standard-Stream, und float schwebt auf dem Standard-Stream, sodass p2 p4 erneut blockiert.
Ähm, hier kommt der Punkt, an dem p2 und p3 gleichzeitig auf Float eingestellt sind. Ich weiß nicht, ob den Lesern bisher aufgefallen ist, dass p2 in jedem Beispiel schwebend ist Es folgt nicht p1. Daher können wir eine wichtige Schlussfolgerung ziehen:
Wenn ein bestimmtes p-Element A schwebend ist und wenn das vorherige Element des A-Elements ebenfalls schwebend ist, folgt das A-Element der rechten Seite des vorherigen Elements (falls vorhanden). Wenn diese beiden Elemente nicht in eine Zeile passen, wird das A-Element in die nächste Zeile gequetscht. Wenn das vorherige Element des A-Elements ein Element im Standardfluss ist, ändert sich die relative vertikale Position von A nicht Das heißt, die Oberseite von A ist immer dieselbe wie die untere Ausrichtung des Elements. Vereinfacht gesagt werden zwei float:left horizontal angeordnet. Wenn der erste ein Standardstream ist und der zweite float:left ist, wird der zweite immer noch unter dem ersten angeordnet p ist HTML. Die Reihenfolge von p im Code wird bestimmt.
Das Ende in der Nähe des Seitenrandes ist die Vorderseite, und das Ende, das weit vom Seitenrand entfernt ist, ist die Rückseite.
Um den Lesern das Verständnis zu erleichtern, finden Sie hier einige weitere Beispiele.
Wenn wir p2, p3 und p4 so einstellen, dass sie nach links schweben, ist der Effekt wie folgt:

Gemäß der obigen Schlussfolgerung: Beginnen Sie mit der Analyse von p4, und es wird festgestellt, dass die Das obere Element p3 folgt p3. P3 stellt fest, dass das obere Element p2 ebenfalls schwebend ist. P2 stellt fest, dass das obere Element p1 ein Element im Standardstrom ist von p2 bleibt unverändert und die Oberseite ist immer noch an der Unterseite des p1-Elements ausgerichtet. Da es schwebend bleibt, befindet sich die linke Seite nahe am Rand der Seite, die linke Seite ist also die Vorderseite, also befindet sich p2 ganz links.
Wenn p2, p3 und p4 alle so eingestellt sind, dass sie nach rechts schweben, ist der Effekt wie folgt:

Das Prinzip ist im Grunde das gleiche wie beim Schweben nach links, aber Sie müssen bezahlen Aufmerksamkeit auf die entsprechende Beziehung. Da es nach rechts schwebt, befindet sich die rechte Seite nahe am Rand der Seite, die rechte Seite ist also vorne, also befindet sich p2 ganz rechts.

Wenn wir p2 und p4 nach links verschieben, sieht das Wirkungsdiagramm wie folgt aus:

Dennoch gemäß der Schlussfolgerung schweben p2 und p4 und befinden sich außerhalb des Diagramms Standardfluss, also bewegt sich p3 automatisch nach oben und bildet mit p1 einen Standardfluss. p2 stellt fest, dass das vorherige Element p1 ein Element im Standardstream ist, sodass die relative vertikale Position von p2 unverändert bleibt und am unteren Rand von p1 ausgerichtet ist. p4 stellt fest, dass das vorherige Element p3 ein Element im Standardstream ist, sodass die Oberseite von p4 und die Unterseite von p3 ausgerichtet sind. Dies gilt immer, da aus der Abbildung ersichtlich ist, dass nach der Verschiebung von p3 auch p4 nach oben verschoben wird bewegt sich nach oben, und p4 bewegt sich immer nach oben. Dadurch wird sichergestellt, dass die Oberseite von sich selbst mit der Unterseite des vorherigen Elements p3 (Element im Standardfluss) ausgerichtet ist.

An dieser Stelle herzlichen Glückwunsch an die Leser, die das Hinzufügen von Floats beherrschen, aber es gibt auch das Löschen von Floats, das anhand der oben genannten Grundlagen sehr einfach zu verstehen ist.

Nach der obigen Studie ist ersichtlich, dass die Elemente vor dem Schweben, also im Standardfluss, vertikal angeordnet sind, nach dem Schweben jedoch als horizontal angeordnet verstanden werden können.
Das Löschen von Floats kann als Aufbrechen der horizontalen Anordnung verstanden werden.
Das Schlüsselwort zum Löschen von Floats ist wie folgt:

clear: none |

keine: Standardwert. Schwebende Objekte sind auf beiden Seiten erlaubt

links: Schwebende Objekte sind auf der linken Seite nicht erlaubt

rechts: Schwebende Objekte sind auf der rechten Seite nicht erlaubt

beide: Schwebend Objekte sind nicht erlaubt

Die Definition ist sehr leicht zu verstehen, aber Leser werden möglicherweise feststellen, dass dies bei der praktischen Verwendung nicht der Fall ist.

An der Definition ist nichts auszusetzen, aber sie ist zu vage und lässt uns ratlos zurück.

Wenn auf der Seite nur zwei Elemente p1 und p2 vorhanden sind, schweben sie beide nach links. Das Szenario ist wie folgt:

Zu diesem Zeitpunkt: Sowohl p1 als auch p2 sind schwebend. Gemäß den Regeln folgt p2 auf p1, aber wir hoffen immer noch, dass p2 unter p1 angeordnet werden kann, genau wie p1 nicht schwebt und p2 nach links schwebt.
Zu diesem Zeitpunkt wird „clear float“ (clear) verwendet. Wenn es ausschließlich auf der offiziellen Definition basiert, können Leser versuchen, Folgendes zu schreiben: Fügen Sie „clear:right;“ zum CSS-Stil von p1 hinzu bedeutet, dass die rechte Seite von p1 nicht zulässig ist. Da p2 ein schwebendes Element ist, wird es automatisch eine Zeile nach unten verschoben, um die Regeln zu erfüllen.

Tatsächlich ist dieses Verständnis falsch und hat keine Wirkung.

Für CSS Clear Float (clear) müssen Sie bedenken: Diese Regel kann sich nur auf das Element selbst auswirken, das clear verwendet, und nicht auf andere Elemente.

Wie verstehst du es? Nehmen wir das obige Beispiel: Wir möchten, dass sich p2 bewegt, aber wir verwenden „clear float“ im CSS-Stil des p1-Elements und versuchen, p2 zu zwingen, sich nach unten zu bewegen, indem wir das schwebende Element rechts von p1 (clear:right;) löschen Dies ist nicht möglich, da dieser Clear Float in p1 aufgerufen wird und nur p1 und nicht p2 beeinflussen kann.

Wenn p2 nach unten verschoben werden soll, müssen Sie float im CSS-Stil von p2 verwenden. In diesem Beispiel befindet sich ein schwebendes Element p1 auf der linken Seite von p2. Solange Sie also „clear:left“ im CSS-Stil von p2 verwenden, dürfen keine schwebenden Elemente auf der linken Seite von p2 angezeigt werden Element wird p2 gezwungen, sich eine Zeile nach unten zu bewegen.

Was passiert also, wenn es nur zwei Elemente p1 und p2 auf der Seite gibt und beide richtig schweben? Die Leser sollten die Szene zu diesem Zeitpunkt wie folgt selbst erraten können:

Was sollten Sie tun, wenn p2 nach unten auf p1 verschoben werden soll?
Wenn wir p2 verschieben möchten, müssen wir float im CSS-Stil von p2 aufrufen, da float nur das Element beeinflussen kann, das es aufruft.

Es ist ersichtlich, dass sich auf der rechten Seite von p2 ein schwebendes Element p1 befindet. Dann können wir im CSS-Stil von p2 angeben, dass schwebende Elemente nicht angezeigt werden dürfen rechte Seite von p2, so dass p2 gezwungen ist, sich eine Reihe nach unten zu bewegen, angeordnet unter p1.

Erweitern wir es später:
Wenn „clear:both“ nicht hinzugefügt wird, ist der Effekt wie folgt:

Die graue Hintergrundfarbe wird nicht hinzugefügt zum zweiten OK, da die zweite Zeile float ist und sich nicht auf derselben Ebene wie .ob-body befindet. Die Pseudoklasse: after wird verwendet, um die zweite Zeile auf den Boden zurückzusetzen

Der Effekt nach dem Hinzufügen von clear:both:

<head>
    <style>
        .ob-title{
            background-color: orange;
        }
        .ob-body{
            background-color: #ddd;
        }
        .ob-body .menu{
            float: left;
            width: 200px;
            background-color: pink;
        }
        .ob-body .content{
            float: left;
            background-color: aquamarine;
        }
        .clearfix:after{    /*在.clearfix后边追加一个隐藏的block,带一个clear:both属性*/
            content: "";
            display: block;  /*block宽度会横向填充满屏幕，在父元素的最后追加一个height:0，占满屏幕的看不见的细长条*/
            line-height: 0;
            clear: both;  /*这个最下边细长条左右两边都清除float*/
        }
    </style></head><body style="margin: 10px;">
    <p class="ob-title">头部信息</p>
    <p class="ob-body clearfix">   <!--此处调用尾类-->
        <p class="menu">左侧菜单</p>
        <p class="content">右侧内容</p>
        <!--<p style="clear: both;"></p>-->  <!--第二种写法，不用调用clearfix类-->
    </p></body>

Abschließend analysieren: Warum das Hinzufügen von Clearfix in Ordnung ist. Die beiden Schreibmethoden bedeuten tatsächlich dasselbe: Am Ende des .ob-Bodys wird ein leeres

hinzugefügt (solange es sich um einen Block handelt, da nur Blöcke horizontal gefüllt werden können). Dies ist
eigentlich unsichtbar Der schlanke Balken wird definitiv durch die Hintergrundfarbe von .ob-body gesteuert, da er sich am unteren Rand von .ob-body befindet und nicht schwebend ist liegt innerhalb des Höhenbereichs, wird durch die graue Hintergrundfarbe beeinflusst. Obwohl die zweite Reihe noch im Himmel schwebt, wurde der Boden mit Silber bedeckt. Und das untere muss klar sein: Wenn es sich nur um einen Standardstream handelt, befindet es sich nahe am Ende der ersten Zeile und kann die zweite Zeile natürlich nicht abdecken. Tatsächlich kann es verwendet werden, wenn es klar ist: links Dies ist auch in diesem Beispiel wirksam (Da die zweite Zeile nur float: left ist), verwenden Sie jedoch aus Gründen der Vielseitigkeit einfach beide. Es wurde auch überprüft, dass sich diese Regel nur auf das gelöschte Element selbst auswirken kann, nicht jedoch wirkt sich auf andere Elemente aus.

Das obige ist der detaillierte Inhalt vonDetaillierte CSS-Float-Einführung in clear:both. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!