Welches Attribut löscht Floats in HTML5?

In HTML5 ist das Attribut zum Löschen von Floats „clear“. Das Attribut „clear“ gibt an, welche Seite des Elements keine anderen schwebenden Elemente zulässt. Wenn der Stil „clear:both;“ auf das schwebende Element festgelegt ist, kann das schwebende Element gelöscht werden, sodass weder die linke noch die rechte Seite des Elements gelöscht werden schweben lassen.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

In HTML5 ist das Attribut zum Löschen von Floats „clear“.

Das Attribut „clear“ gibt an, welche Seite des Elements keine anderen schwebenden Elemente zulässt.

Sehen wir uns das Attribut „clear“ genauer an.

Zunächst müssen Sie wissen, dass div ein Element auf Blockebene ist. Es nimmt eine exklusive Zeile auf der Seite ein und ist von oben nach unten angeordnet, was dem legendären Fluss entspricht. Wie im Bild unten gezeigt:

Es ist ersichtlich, dass selbst wenn die Breite von div1 sehr klein ist, eine Zeile auf der Seite div1 und div2 aufnehmen kann und div2 aufgrund des div-Elements nicht hinter div1 eingestuft wird belegt eine eigene Zeile.

                                                                                                                                                                                                                       shan , erscheinen, abstürzen und div im zu optimierenden Standardablauf – Beachten Sie, dass sich die oben genannten Theorien auf Divs im Standardablauf beziehen.

 Xiaocai glaubt, dass der grundlegende Ausgangspunkt, egal wie komplex das Layout ist, lautet: „Wie man mehrere div-Elemente in einer Zeile anzeigt.“

                                                                                                                     TO TO TO BE GEGEBEN WERDEN UNTERSCHIEDLICH SEIN ANWENDEN. ​​​​

​​​​ Floating kann so verstanden werden, dass ein bestimmtes Div-Element aus dem Standardfluss ausbricht und auf dem Standardfluss schwebt, der nicht auf dem gleichen Niveau wie der Standardfluss liegt.

Angenommen, div2 im Bild oben schwebt, bricht es vom Standardfluss ab, aber div1, div3 und div4 befinden sich noch im Standardfluss, sodass sich div3 automatisch nach oben bewegt und die Position von div2 einnimmt. und einen Fluss neu organisieren. Wie im Bild gezeigt:

Da div2 auf Float eingestellt ist, wird es nicht mehr automatisch nach oben verschoben, um die Position von div2, div3 zu ersetzen. und div4 werden nacheinander angeordnet, um einen neuen Fluss zu bilden. Und weil der Float über dem Standardfluss schwebt, blockiert div2 einen Teil von div3 und div3 sieht „kurz“ aus.

Hier verwendet div2 links schwebend (float:left;), was als schwebend und nach links angeordnet angesehen werden kann, und rechts schwebend (float:right;) bedeutet natürlich nach rechts angeordnet. Mit links und rechts ist hier der linke und rechte Rand der Seite gemeint.

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

Zu diesem Zeitpunkt ist div2 am rechten Rand der Seite angeordnet und blockiert nicht mehr die Zusammensetzung von div1 , div3 und div4 oben erwähnt.

Bisher haben wir nur ein div-Element gefloated, wie wäre es mit mehr?

Als nächstes fügen wir sowohl div2 als auch div3 ein Left-Floating hinzu. Der Effekt ist wie folgt:

Da div2 und div3 ebenfalls schwebend sind, gehören sie nicht mehr zum Standardfluss, sodass div4 automatisch nach oben verschoben wird und bilden eins mit div1 Der „neue“ Standardfluss, und der Float schwebt über dem Standardfluss, sodass div2 div4 erneut blockiert.

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

Wenn ein bestimmtes div-Element A schwebend ist und das vorherige Element des A-Elements ebenfalls schwebend ist, folgt das A-Element dem vorherigen Element (wenn eine Zeile nicht hineinpasst). zwei Elemente, dann 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, dh die obere Position von A wird immer das gleiche sein wie das vorherige Element, das unten ausgerichtet ist.

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

Das Ende nahe am Seitenrand ist die Vorderseite, und das Ende weit weg vom Seitenrand ist die Rückseite.

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

Wenn wir div2, div3 und div4 so einstellen, dass sie nach links schweben, ist der Effekt wie folgt:

Folgen Sie Xiaocai zum Verständnis der obigen Schlussfolgerung: Beginnen Sie mit der Analyse von div4. Es wird festgestellt, dass das obere Element div3 schwebt, sodass div4 auf div3 folgt follow Nach div2; 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 an der Unterseite des div1-Elements ausgerichtet ist. Da es schwebend bleibt, befindet sich die linke Seite nahe am Rand der Seite, sodass die linke Seite vorne ist und sich div2 ganz links befindet.

Wenn Sie div2, div3 und div4 so einstellen, dass sie nach rechts schweben, ist der Effekt wie folgt:

Das Prinzip ist im Grunde dasselbe wie beim Schweben nach links, Sie müssen jedoch auf die entsprechende Beziehung achten. Da es nach rechts schwebt, befindet sich die rechte Seite nahe am Rand der Seite, sodass die rechte Seite die Vorderseite ist und sich div2 ganz rechts befindet.

Wenn wir div2 und div4 nach links schweben lassen, sieht das Effektdiagramm wie folgt aus:

Basierend auf der Schlussfolgerung sind div2 und div4 schwebend und außerhalb des Standardflusses, sodass div3 automatisch nach oben verschoben und gebildet wird der Standardfluss mit div1. div2 stellt fest, dass das vorherige Element div1 ein Element im Standardfluss ist, sodass die relative vertikale Position von div2 unverändert bleibt und an der Unterseite von div1 ausgerichtet ist. div4 stellt fest, dass das vorherige Element div3 ein Element im Standardfluss ist, sodass die Oberseite von div4 an der Unterseite von div3 ausgerichtet ist. Dies gilt immer, da, wie aus dem Bild ersichtlich ist, nach der Verschiebung von div3 auch div4 nach oben verschoben wird bewegt sich nach oben, und div4 bewegt sich immer nach oben. Dadurch soll sichergestellt werden, dass die Oberseite von sich selbst mit der Unterseite des vorherigen Elements div3 (einem Element im Standardfluss) ausgerichtet ist.

An dieser Stelle herzlichen Glückwunsch an die Leser, die das Hinzufügen von Floats gemeistert haben, aber auch das Löschen von Floats ist auf der Grundlage der oben genannten Grundlage sehr einfach zu verstehen. ， Nachdem Sie oben gelernt haben, können Sie sehen, dass sich das Element vor dem Schweben im Standardfluss befindet, der vertikal angeordnet ist, und nach dem Schweben als horizontale Anordnung verstanden werden kann.

Das Löschen von Floats kann als Aufbrechen der horizontalen Anordnung verstanden werden.

                                                                                                  . 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: Schwebende Objekte sind nicht erlaubt

Die Definition ist sehr einfach zu verstehen, aber die Leser könnten verwirrt sein, wenn sie es tatsächlich verwenden. Sie werden feststellen, dass dies 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 div1 und div2 vorhanden sind, sind sie beide schwebend. Das Szenario ist wie folgt:

Zu diesem Zeitpunkt sind sowohl div1 als auch div2 schwebend Gemäß den Regeln folgt div2 auf div1. Wir möchten jedoch weiterhin, dass div2 unter div1 angeordnet wird, genau wie div1 nicht schwebend ist und div2 schwebend bleibt.

Derzeit 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 div1 hinzufügen, was bedeutet, dass Floating-Elemente nicht zulässig sind auf der rechten Seite von div1. Da div2 ein schwebendes Element ist, wird es automatisch eine Zeile nach unten verschoben, um den Regeln zu entsprechen.

Tatsächlich ist dieses Verständnis falsch und hat keine Wirkung. Schauen wir uns das Fazit an:                                                                                                                                                                                                                   um es klar auszudrücken.

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

 Laut Xiaocais Schlussfolgerung müssen Sie float im CSS-Stil von div2 verwenden, wenn Sie möchten, dass sich div2 nach unten bewegt. In diesem Beispiel befindet sich ein schwebendes Element „div1“ auf der linken Seite von „div2“. Solange Sie also „clear:left“ im CSS-Stil von „div2“ verwenden, dürfen keine schwebenden Elemente auf der linken Seite von „div2“ angezeigt werden Element, div2 wird gezwungen, sich eine Zeile nach unten zu bewegen.

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

Was sollten Sie tun, wenn Sie möchten, dass Div2 nach Div1 verschoben wird?

In ähnlicher Weise müssen wir, basierend auf Xiaocais Schlussfolgerung, div2 verschieben möchten, float im CSS-Stil von div2 aufrufen, 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. Dann können wir clear:right; im CSS-Stil von div2 verwenden, um anzugeben, dass auf der rechten Seite von div2 keine schwebenden Elemente angezeigt werden dürfen , sodass div2 gezwungen ist, sich eine Zeile nach unten zu bewegen und unterhalb von div1 eingestuft zu werden.

Verwandte Empfehlungen: „HTML-Video-Tutorial“

Das obige ist der detaillierte Inhalt vonWelches Attribut löscht Floats in HTML5?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!