How does CSS clearing really work?

Question

I have a <div> that I want to be on a line by itself. According to W3Schools, this rule:

div.foo {
clear: both;
}

...should mean this:

"No floating elements allowed on either the left or the right side."

However, if I float two <div> elements left, and apply the rule above to the first one, the second one does not budge.

On the other hand, if I apply "clear: left" to the second <div>, it moves down to the next line. This is my normal approach, but I don't understand why I have to do it like this.

Is the W3Schools description above poorly stated, or am I missing something? Is a clearing rule only able to move the element to which it is applied?

Answer

Thanks Michael S and John D for the good explanations. Warren pointed to the CSS2 spec, and that's where I found this answer (emphasis mine):

This property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box.

So: clear only affects the position of the element to which it is applied, relative to elements that appear before it the code.

Disappointing that I can't tell my <div> to make other divs move down, but them's the breaks. :)

Answer 1

When you apply clear to an element, it will move THAT element so that it doesn't have items left or right of it. It does not re-position any of the other elements, it simply moves the element to a position where nothing is around it.

Edit

Items above the item cleared are not moved, items below the element COULD be moved. Also note the additional comment in the comments

Answer 2

I generally do the following for that effect:

float: left;
clear: right;

I don't know if it applies merely to the element to which it is applied, though it makes sense.

The specs are available here, though: http://www.w3.org/TR/REC-CSS2/

Answer 3

Your css is parsing "correctly." Your second div is still floated left, so even after you clear the first one, if there's room widthwise for the second one, it will fit floated left at the topmost point it can.

Answer 4

You apply clear to the element that you want on a new line. The clear that you use depends on the elements that you don't want it touching. If you want Image B to be on a new line and not touch Image A (which lets say is float: left), you would put Image B as {clear: left} not clear right as you would naturally think. You are clearing the float of the previous element.

Answer 5

Yes, clearing only moves the element to which it is applied. However, the result feels different depending on whether the element is "in flow" or out of flow. I guess that is confusing you.

If the element is in flow, clearing moves it down together with everything that follows. Think of it as moving current pen position (the place where next element should be placed) down. This behaviour is easy to undestand.

If the element is out of flow, as the float in your example, only the element is moved, the pen position stays at the same place, unless other rules make them move. For example, a float is not allowed to start above a previous float.

There is also a messy issue of margin collapsing. Clearing interrupts them, sometimes in an unintuitive way.