Detaillierte Grafik- und Texterklärung von CSS Float-Float/Clear

Tutorial beginnt:

Zunächst müssen Sie wissen, dass p ein Element auf Blockebene ist, das eine exklusive Zeile auf der Seite einnimmt und von oben nach oben angeordnet ist unten, das ist der legendäre Stream. Wie unten gezeigt:

Es ist ersichtlich, dass eine Zeile auf der Seite p1 und p2 aufnehmen kann, selbst wenn die Breite von p1 sehr klein ist, p2 jedoch nicht rangiert hinter p1, da p Elemente in einer eigenen Zeile stehen.

Beachten Sie, dass sich die oben genannten Theorien auf p im Standardfluss beziehen.

Xiaocai glaubt, dass der grundlegende Ausgangspunkt, egal wie komplex das Layout ist, darin besteht: „Wie man mehrere pElemente in einem anzeigt.“ Linie".

Offensichtlich kann der Standard-Stream den Bedarf nicht mehr decken, daher muss Floating verwendet werden.                                                                                                                                                                             .

Angenommen, p2 in der obigen Abbildung schwebt, bricht es vom Standardfluss ab, aber p1, p3 und p4 befinden sich immer noch im Standardfluss, sodass p3 automatisch nach oben verschoben wird und besetzen Sie die Position von p2. Bauen Sie einen Stream wieder zusammen. Wie im Bild gezeigt:

Wie aus dem Bild ersichtlich ist, gehört p2 nicht mehr zum Standardfluss, da es auf Float eingestellt ist, und p3 wird automatisch nach oben verschoben

zum Ersetzen von

An der Position von p2 werden p1, p3 und p4 so angeordnet, dass ein neuer Stream entsteht. Und weil der Float über dem Standardfluss schwebt, blockiert p2 einen Teil von p3 und p3 sieht „kurz“ aus.

Hier verwendet p2 das linke Gleiten (

float:left

;), was als Gleiten nach links und dann Gleiten nach rechts (float

) verstanden werden kann : rechts;) Natürlich ist es rechts angeordnet. 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 wird p2 am rechten Rand der Seite angeordnet und blockiert p3 nicht mehr. Sie können den oben erwähnten Fluss aus p1, p3 und p4 deutlich erkennen.

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 ein Left-Floating hinzu. Der Effekt ist wie folgt:

Da p2 und p3 ebenfalls floaten, gehören sie nicht mehr zum Standard-Stream. also bewegt sich p4 automatisch nach oben und bildet mit p1 einen „neuen“ Standardstrom, und der

Float schwebt über dem Standardstrom

, sodass p2 p4 erneut blockiert.

Ähm, kommen wir zum Punkt. Wenn p2 und p3 gleichzeitig auf Float eingestellt sind, wird p3 auf p2 folgen. Ich weiß nicht, ob den Lesern bisher aufgefallen ist, dass p2 in jedem schwebend ist Beispiel, aber es folgt nicht p1. Daher können wir eine wichtige Schlussfolgerung ziehen:

Wenn ein p

Element A

schwebend ist, wenn A Element Das vorherige Element ist auch schwebend, dann folgt das A-Element dem des vorherigen Elements, dann wird das A-Element in die nächste Zeile gequetscht) ; wenn das vorherige Element des A-Elements ein Element im Standardstream ist, dann ändert sich die relative vertikale Position von A nicht, d. h. der obere Teil von A wird immer am unteren Rand des vorherigen Elements ausgerichtet. Die Reihenfolge von p wird durch die Reihenfolge von p im HTML

bestimmt

Code von . Das Ende nahe am Seitenrand ist vorne, und das Ende weit weg vom Seitenrand ist zurück

.

Um den Lesern das Verständnis zu erleichtern, finden Sie hier einige weitere Beispiele.

Wenn wir p2, p3 und p4 auf links schwebend setzen, ist der Effekt wie folgt:

Gemäß der obigen Schlussfolgerung , Folgen Sie Xiaocai, um es zu verstehen: Beginnen Sie mit p4 und analysieren Sie es. Es stellt fest, dass das obere Element p3 schwebend ist, also wird p4 feststellen, dass das obere Element p2 ebenfalls schwebend ist, also wird p3 das finden Das obere Element p2 ist ebenfalls schwebend, sodass p3 auf p2 folgt. Das Element p1 ist ein Element im Standardstream, sodass die relative vertikale Position von p2 unverändert bleibt und die Oberseite weiterhin an der Unterseite des Elements p1 ausgerichtet ist. Da es schwebend bleibt, befindet sich die linke Seite nahe am Rand der Seite, sodass die linke Seite die Vorderseite ist und sich p2 ganz links befindet.

Wenn p2, p3 und p4 auf rechts schwebend eingestellt sind, ist der Effekt wie folgt:

Prinzip Es ist im Grunde das Gleiche wie beim Schwebenlassen, aber Sie müssen auf die entsprechende Beziehung achten. 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 Effektdiagramm wie folgt aus:

Immer noch basierend auf der Schlussfolgerung sind p2 und p4 schwebend und aus dem Standardfluss heraus, sodass p3 automatisch nach oben verschoben wird und mit p1 einen Standardfluss bildet. 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 an der Unterseite von p3 ausgerichtet ist. Dies gilt immer, da aus der Abbildung ersichtlich ist, dass nach der Verschiebung von p3 auch p4 nach oben verschoben wird nach oben bewegt, p4 stellt immer sicher, dass seine Oberseite mit der Unterseite des vorherigen Elements p3 (Element im Standardfluss) ausgerichtet ist .

An dieser Stelle herzlichen Glückwunsch an den Leser, der das Hinzufügen von Floats beherrscht, aber es gibt auch das Löschen von Floats, das auf der Grundlage des oben Gesagten sehr einfach zu verstehen ist.

Nach der obigen Untersuchung ist ersichtlich, dass die Elemente vor dem Schweben, also im Standardfluss, vertikal angeordnet sind und nach dem Schweben 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 clear. Die offizielle Definition lautet wie folgt:

Syntax:

klar: keine |. links |. beide

Wert:

keine: Standardwert. Schwebende Objekte auf beiden Seiten zulassen

links: Schwebende Objekte auf der linken Seite nicht zulassen

rechts: Schwebende Objekte auf der rechten Seite nicht zulassen

beides: Es sind keine schwebenden Objekte zulässig

Die Definition ist sehr leicht zu verstehen, aber Leser werden möglicherweise feststellen, dass dies bei der tatsächlichen 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, sind beide linksschwebend. Das Szenario ist wie folgt:

Zu diesem Zeitpunkt schweben p1 und p2 gemäß den Regeln, 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: „clear:right“ zum CSS-Stil von p1 hinzufügen 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. Werfen wir einen Blick auf die Schlussfolgerung:

Denken Sie bei CSS s Clear Float (clear) unbedingt daran: Diese Regel kann sich nur auf das auswirken Element selbst, das Clearing verwendet, nicht das Element selbst. Beeinflusst andere Elemente.

Wie ist das zu verstehen? 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.

Laut Xiaocais Schlussfolgerung müssen Sie float im CSS-Stil von p2 verwenden, wenn Sie möchten, dass sich p2 nach unten bewegt. In diesem Beispiel gibt es ein schwebendes Element p1 auf der linken Seite von p2, also verwenden Sie einfach clear:left im CSS-Stil von p2, um anzugeben, dass schwebende Elemente nicht auf der linken Seite erscheinen dürfen des p2-Elements, so dass p2 gezwungen ist, 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 zu diesem Zeitpunkt in der Lage sein, die Szene wie folgt selbst zu erraten:

Was sollten Sie tun, wenn p2 nach unten auf p1 verschoben werden soll?

Basierend auf Xiaocais Schlussfolgerung müssen wir, wenn wir p2 verschieben möchten, 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.

Das obige ist der detaillierte Inhalt vonDetaillierte Grafik- und Texterklärung von CSS Float-Float/Clear. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!