Wie funktioniert CSS Clearing wirklich?

Question

Ich habe eine <div>, die ich selbst auf einer Linie sein will. Nach W3Schools , diese Regel:

div.foo {
  clear: both;
}

... soll dies bedeuten:

  

„Es wurden keine schwebenden Elemente auf der linken oder der rechten Seite erlaubt.“

Wenn ich jedoch zwei <div> Elemente links schweben, und die Regel gelten oben auf die erste, nicht das zweite nicht nach.

Auf der anderen Seite, wenn ich "clear: left" auf den zweiten <div> gelte, geht es in der nächsten Zeile nach unten. Das ist mein normaler Ansatz, aber ich verstehe nicht, warum ich es so zu tun haben.

ist über der W3Schools Beschreibung schlecht ausgeführt, oder bin ich etwas fehlt? Ist ein Clearing Regel nur in der Lage, das Element zu bewegen, auf die sie angewendet?

Antwort

Danke Michael S und John D für die guten Erklärungen. Warren deutete auf der CSS2-Spezifikation , und das ist, wo ich diese Antwort (Hervorhebung von mir) gefunden :

  

Diese Eigenschaft gibt an, welche Seiten ein Box des Elements (n) zu einer nicht benachbart sein können früher Floating-Box.

Also:. clear betrifft nur die Position des Elements, auf die sie angewendet wird, in Bezug auf Elemente, die, bevor sie erscheinen der Code

enttäuschend, dass ich nicht meinem <div> sagen kann auf andere divs machen nach unten bewegen, aber sie ist die Pausen. :)

Answer 1

Wenn Sie auf ein Element klar anwenden, wird es dieses Element bewegen, so dass sie nicht über Gegenstände nach links oder rechts davon. Es ist nicht eine der anderen Elemente neu zu positionieren, ist es einfach bewegt das Element in eine Position, in der nichts drum herum ist.

Bearbeiten

Gegenstände über dem Element gelöscht werden nicht verschoben, Elemente unter dem Element könnte verschoben werden. Beachten Sie auch die weiteren Kommentar in den Kommentaren

Answer 2

Ihre CSS Parsen "richtig." Ihre zweite div noch schwebte links, so dass selbst, nachdem Sie das erste zu löschen, wenn es Raum der Breite für die zweiten, wird es an der obersten Stelle links fit schwebte es kann.

Answer 3

Ja, nur Clearing bewegt das Element, auf das sie angewendet wird. Allerdings fühlt sich das Ergebnis unterschiedlich, je nachdem, ob das Element „im Fluß“ oder aus Strömung. Ich denke, dass Sie ist verwirrend.

Wenn das Element in Fluss ist, Clearing- bewegt er sich zusammen mit allem, was folgt. Betrachten Sie es als aktuelle Stiftposition zu bewegen (die Stelle, wo sollte nächstes Element gesetzt wird) nach unten. Dieses Verhalten ist einfach zu undestand.

Wenn das Element aus der Strömung ist, wie der Schwimmer in Ihrem Beispiel nur das Element bewegt wird, bleibt die Stiftposition an der gleichen Stelle, es sei denn, andere Regeln sie machen bewegen. Zum Beispiel wird ein Schwimmer nicht erlaubt über einem vorherigen Schwimmer zu starten.

Es gibt auch eine unordentliche Frage der Marge kollabieren. Clearing unterbricht sie, manchmal in einer Art und Weise nicht intuitiv.

Answer 4

Sie gelten klar auf das Element, das Sie auf einer neuen Zeile möchten. Die klar, dass Sie verwenden, hängt von den Elementen, die Sie nicht wollen, es zu berühren. Wenn Sie Bild B auf einer neuen Zeile sein wollen und nicht Bild A berühren (was sagen lässt ist float: left), würden Sie Bild B wie setzen {clear: left} nicht klar, rechts, wie Sie natürlich denken würde. Sie sind den Schwimmer des vorherigen Elements zu löschen.

Answer 5

ich für diesen Effekt die folgende Regel tun:

float: left;
clear: right;

Ich weiß nicht, ob es nur auf das Element trifft, auf die sie angewendet wird, wenn es Sinn macht.

Die Spezifikationen sind hier verfügbar, aber: http://www.w3.org/ TR / REC-CSS2 /