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

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.