CSS float (float, clear) beliebte Erklärung und Erfahrungsaustausch

Ich bin schon vor langer Zeit mit CSS in Berührung gekommen, aber Floating hat mich immer verwirrt. Vielleicht lag es an meinem mangelnden Verständnis oder daran, dass ich kein beliebtes Tutorial gefunden habe.

Vor ein paar Tagen hat Xiaocai endlich die Grundprinzipien des Schwebens verstanden und konnte es kaum erwarten, sie mit allen zu teilen.

Vorne geschriebene Wörter:

Da CSS viel Inhalt enthält, hat Xiaocai nicht die Energie, es von Anfang bis Ende zu erklären, sodass er es nur gezielt erklären kann.

Wenn Sie das CSS-Boxmodell verstehen, aber Floats nicht, kann Ihnen dieser Artikel helfen.

Mein Niveau ist begrenzt und dieser Artikel ist nur ein Einführungstutorial. Bitte verzeihen Sie mir etwaige Unangemessenheiten!

Dieser Artikel verwendet das Div-Element-Layout als Beispiel.

Tutorial beginnt:

Zunächst sollten Sie wissen, dass div ein Element auf Blockebene ist, das eine einzelne Zeile auf der Seite einnimmt und von oben nach unten angeordnet ist, was dem legendären Fluss entspricht. Wie unten dargestellt:

Es ist ersichtlich, dass div1 und div2 in eine Zeile der Seite passen, selbst wenn die Breite von div1 sehr klein ist, und div2 nicht hinter div1 platziert wird, da das div-Element eine einzelne Zeile einnimmt.

Beachten Sie, dass sich die obigen Theorien auf Divs im Standardfluss beziehen.

Xiaocai glaubt, dass unabhängig von der Komplexität des Layouts der grundlegende Ausgangspunkt lautet: „So zeigen Sie mehrere Div- Elemente in einer Zeile an .“

Offensichtlich kann der Standardfluss den Anforderungen nicht mehr gerecht werden, daher wird Floating verwendet.

Unter Schweben kann verstanden werden, dass sich ein Div- Element vom Standardfluss löst, über dem Standardfluss schwebt und sich nicht auf derselben Ebene wie der Standardfluss befindet.

Angenommen, Div2 in der obigen Abbildung schwebt, dann liegt es außerhalb des Standardflusses, aber Div1, Div3 und Div4 befinden sich noch im Standardfluss. Daher bewegt sich Div3 automatisch nach oben, nimmt die Position von Div2 ein und bildet einen neuen Fluss. Wie in der Abbildung gezeigt:

Wie aus der Abbildung ersichtlich, gehört div2 nicht mehr zum Standardfluss, da es auf Float eingestellt ist. div3 wird automatisch nach oben verschoben, um div2 zu ersetzen . div1, div3 und div4 werden der Reihe nach angeordnet, um einen neuen Fluss zu bilden. Und da der Float über dem Standardfluss schwebt, blockiert Div2 einen Teil von Div3, wodurch Div3 „kürzer“ aussieht.

Hier verwendet div2 linksschwebend (float:left;), was als Anordnung links nach dem Schweben verstanden werden kann, und rechtsschwebend (float:right;) bedeutet natürlich, dass es rechts angeordnet ist. Mit links und rechts sind hier die linken und rechten Ränder der Seite gemeint.

Wenn wir div2 nach rechts schweben lassen, ist der Effekt wie folgt:

Zu diesem Zeitpunkt ist div2 nahe am rechten Rand der Seite angeordnet und blockiert div3 nicht mehr. Die Leser können den oben erwähnten Fluss aus div1, div3 und div4 deutlich erkennen.

Bisher haben wir nur ein Div-Element schweben lassen. Wie wäre es mit mehr als einem?

Als nächstes fügen wir linksschwebend zu Div2 und Div3 hinzu. Der Effekt ist wie unten dargestellt:

Da Div2 und Div3 schweben, gehören sie nicht mehr zum Standardfluss, sodass Div4 automatisch nach oben wandert, um mit Div1 einen „neuen“ Standardfluss zu bilden, und schwebend bedeutet, über dem Standardfluss zu schweben, sodass Div2 Div4 erneut blockiert.

Ähm, jetzt kommt der springende Punkt. Wenn div2 und div3 gleichzeitig auf Float gesetzt werden, folgt div3 auf div2. Ich frage mich, ob den Lesern aufgefallen ist, dass div2 bisher in jedem Beispiel Float war, aber nicht auf div1 folgte. Daher können wir eine wichtige Schlussfolgerung ziehen:

Wenn ein Div- Element A schwebt und das Element über Element A ebenfalls schwebt, folgt Element A dem vorherigen Element ( wenn diese beiden Elemente nicht in eine Zeile passen, wird Element A in die nächste Zeile gequetscht) ; wenn das Element über Element A ein Element im Standardfluss ist, ändert sich die relative vertikale Position von A nicht, d. h. die Oberseite von A ist immer mit der Unterseite des vorherigen Elements ausgerichtet.

Die Reihenfolge der Divs wird durch die Reihenfolge der Divs im HTML-Code bestimmt.

Das Ende, das näher am Seitenrand liegt, ist die Vorderseite , und das Ende, das weiter vom Seitenrand entfernt ist, ist die Rückseite .

Um den Lesern das Verständnis zu erleichtern, geben wir noch ein paar Beispiele.

Wenn wir div2, div3 und div4 auf „float left“ setzen, ist der Effekt wie folgt:

Basierend auf der obigen Schlussfolgerung folgen Sie Xiaocai, um es noch einmal zu verstehen: Beginnen Sie mit der Analyse bei div4. Es stellt fest, dass das obere Element div3 schwebt, sodass div4 auf div3 folgt. div3 stellt fest, dass das obere Element div2 ebenfalls schwebt, sodass div3 auf div2 folgt. Und div2 stellt fest, dass das obere Element div1 ein Element im Standardfluss ist, sodass die relative vertikale Position von div2 unverändert bleibt und die Oberseite weiterhin mit der Unterseite des div1-Elements ausgerichtet ist. Weil es schwebend gelassen wird, liegt die linke Seite nahe am Seitenrand, also ist die linke Seite vorne und div2 ist ganz links.

Wenn div2, div3 und div4 alle auf „float right“ eingestellt sind, ist der Effekt wie folgt:

Das Prinzip ist grundsätzlich das gleiche wie beim Linksschweben, allerdings muss hier auf die Übereinstimmung von Vorder- und Rückseite geachtet werden. Weil es rechtsschwebend ist, liegt die rechte Seite dicht am Seitenrand, also ist die rechte Seite vorne, also ist div2 ganz rechts.

Wenn wir div2 und div4 nach links schweben lassen, ist der Effekt wie folgt:

Der Schlussfolgerung zufolge schweben Div2 und Div4 immer noch und liegen außerhalb des Standardflusses, sodass Div3 automatisch nach oben verschoben wird und mit Div1 einen Standardfluss bildet. Div2 stellt fest, dass das vorherige Element Div1 ein Element im Standardfluss ist, daher bleibt die relative vertikale Position von Div2 unverändert und ist mit der Unterseite von Div1 ausgerichtet. div4 stellt fest, dass das vorherige Element div3 ein Element im Standardfluss ist. Daher ist die Oberseite von div4 mit der Unterseite von div3 ausgerichtet. Dies ist immer der Fall. Wie aus der Abbildung ersichtlich ist, bewegt sich div4 nach oben, nachdem div3 nach oben verschoben wurde. div4 stellt immer sicher, dass seine Oberseite mit der Unterseite des vorherigen Elements div3 ( einem Element im Standardfluss) ausgerichtet ist.

An dieser Stelle gratulieren wir den Lesern, dass sie das Hinzufügen von Gleitkommazahlen gemeistert haben, aber es gibt auch das Löschen von Gleitkommazahlen. Mit den oben genannten Grundkenntnissen ist das Löschen von Gleitkommazahlen sehr leicht zu verstehen.

Nachdem wir das Obige gelernt haben, können wir Folgendes sehen: Vor dem Schweben ist das Element, d. h. im Standardfluss, vertikal angeordnet, und nach dem Schweben kann es als horizontale Anordnung verstanden werden.

Das Löschen von Floats kann als Brechen der horizontalen Ausrichtung verstanden werden.

Das Schlüsselwort zum Löschen von Floats ist „clear“ und die offizielle Definition lautet wie folgt:

Grammatik:

löschen: keine | links | rechts | beide

Wert:

none: Der Standardwert. Ermöglicht schwebende Objekte auf beiden Seiten

links: Auf der linken Seite sind keine schwebenden Objekte erlaubt

rechts: Auf der rechten Seite sind keine schwebenden Objekte erlaubt

beides: Es sind keine schwebenden Objekte erlaubt

Die Definition ist sehr leicht zu verstehen, aber der Leser stellt möglicherweise fest, dass dies bei der tatsächlichen Verwendung nicht der Fall ist.

Die Definition ist nicht falsch, sie ist nur zu vage und lässt uns ratlos zurück.

Auf der Grundlage der oben genannten Grundlagen ergibt sich folgendes Szenario, wenn auf der Seite nur zwei Elemente, div1 und div2, vorhanden sind, die beide schwebend bleiben:

Zu diesem Zeitpunkt sind div1 und div2 beide schwebend. Gemäß den Regeln folgt div2 div1, aber wir möchten trotzdem, dass div2 unter div1 angeordnet wird, so wie div1 nicht schwebt und div2 nach links schwebt.

Zu diesem Zeitpunkt muss der Float gelöscht werden. Wenn Sie einfach der offiziellen Definition folgen, kann der Leser versuchen, es folgendermaßen zu schreiben: Fügen Sie im CSS-Stil von div1 clear:right; hinzu, was bedeutet, dass Floating-Elemente rechts von div1 nicht zulässig sind. Da div2 ein Floating-Element ist, wird es automatisch eine Zeile nach unten verschoben, um die Regel zu erfüllen.

Tatsächlich ist diese Auffassung falsch und wird keinerlei Auswirkungen haben. Hier die Beilagen:

Bei CSS „ clear float “ muss beachtet werden, dass diese Regel sich nur auf das Element selbst auswirken kann, das „clear“ verwendet, nicht aber auf andere Elemente.

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

Gemäß Xiaocais Schlussfolgerung müssen Sie Float im CSS-Stil von Div2 verwenden, wenn Sie Div2 nach unten verschieben möchten. In diesem Beispiel gibt es ein schwebendes Element div1 auf der linken Seite von div2. Verwenden Sie daher einfach clear:left; im CSS-Stil von div2, um anzugeben, dass schwebende Elemente nicht auf der linken Seite des div2-Elements erscheinen dürfen, sodass div2 gezwungen ist, eine Zeile nach unten zu verschieben.

Was nun, wenn es auf der Seite nur zwei Elemente, div1 und div2, gibt und beide schweben, richtig? Der Leser sollte nun in der Lage sein, das Szenario wie folgt abzuleiten:

Wenn Sie Div2 zu diesem Zeitpunkt unter Div1 verschieben möchten, wie sollten Sie vorgehen?

Außerdem müssen wir gemäß Xiaocais Schlussfolgerung „float“ im CSS-Stil von div2 aufrufen, wenn wir div2 verschieben möchten, da „float“ nur das Element beeinflussen kann, das es aufruft.

Es ist ersichtlich, dass sich auf der rechten Seite von div2 ein schwebendes Element div1 befindet. Daher können wir im CSS-Stil von div2 „clear:right;“ verwenden, um anzugeben, dass auf der rechten Seite von div2 keine schwebenden Elemente erscheinen dürfen. Dadurch wird div2 gezwungen, eine Zeile nach unten zu verschieben und unter div1 platziert zu werden.

An diesem Punkt beherrschen die Leser die Grundprinzipien der schwebenden Positionierung von CSS + DIV, was ausreicht, um mit gängigen Layouts zurechtzukommen.

Tatsächlich bleibt das Wesentliche gleich, egal wie sich die Dinge ändern. Solange die Leser aufmerksam sind, kann selbst das komplexeste Layout mit den von Xiaocai zusammengefassten Regeln bewältigt werden.

Am Ende steht:

Ich muss feierlich erklären, dass CSS äußerst verwirrend ist, insbesondere das Problem der Browserkompatibilität. Mein Niveau ist begrenzt und dieser Artikel enthält möglicherweise unangemessene Inhalte. Ich hoffe, die Leser werden mir verzeihen.

Eigentlich möchte ich gar nicht so einen langen Artikel schreiben, aber zum Verständnis der Leser kann ich es mir nicht verkneifen, weitere Beispiele zu geben.

Um den psychologischen Druck auf die Leser zu verringern, enthält dieser Artikel keinen CSS- oder HTML-Code, da viele Tutorials mittlerweile mit viel CSS-Code beginnen, dessen bloßes Anschauen nervt, geschweige denn das sorgfältige Lesen.

Abschließend wünsche ich den Leserinnen und Lesern viel Vergnügen beim Lesen und beim Wissenserwerb.