why float followed by clear

What does it mean to float left, then clear left. Or float left, then clear right? Can anyone help me understand this. I'm not a CSS guy, but need 开发者_运维百科to understand some of the CSS I'm working with.

#elem1{
    float:left;
    clear:left;
}

#elem2{
    float:left;
    clear:right;
}

If you float two elements together, they will align on the same horizontal axis if you don't apply clearing.

By telling a floating element to clear, it clears any floats that come before it, then floats itself wherever the designer intends to float it. It will go on a new line, or not, depending on the direction of the clear.

See this jsFiddle example for a visualization. The first two <div>s don't clear anything, while the last two <div>s are set to clear both left and right floats.

clear means to position the element below any previous floating elements, to "clear the line".

Usually floating elements pile up on the same line like this:

--- --- ---
| | | | | |
--- --- ---

Making them clear any previous floating elements will make them arrange like this:

---
| |
---
---
| |
---
---
| |
---

Here is a clearer view of why a clear is needed. http://www.quirksmode.org/css/clearing.html