The CSS float property is certainly one of the most obscure when you begin with CSS. As tricky as you may find it it is also one of the most powerful method of positioning.

First try to understand the concept of “flow” in a page. The normal flow of the page is from the top to the bottom. Each element have their own space and can’t overlap each other. Block element are displayed in columns and inline element in lines.

Now giving an element a float is tacking it out of the normal flow. For example, float : left will bring the element as far to the left of his parent container as it can be.

For the other elements that still are in the normal flow, they will fit the spaces left after the floated elements. If there is not enough space on the sides of the floated element they will take the first space available at the bottom of the floated element.

That’s what happen when you have two floated columns that don’t fit on the same line in their container. One will drop and display after the first column.

For a complete resource on float, how to clear them, bugs, etc.. read CSS Float Theory: Things You Should Know from smashing magazine.