I have a `<div>` that I want to be on a line by itself. According to [W3Schools](http://www.w3schools.com/Css/pr_class_clear.asp), 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](http://www.w3.org/TR/REC-CSS2), 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. :)