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.