How does CSS clearing really work?

Question

I have a

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

div.foo {
  clear: both;
}

...s

相关标签:

Answer 1

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.

Answer 2

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 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

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 5

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