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

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