Clearing the floats, overflowing the layout

Float is an often misunderstood CSS property, however when used properly it can be a very useful technique for implementing CSS layouts.

Quoting the CSS standards guide at the w3c website:

A float is a box that is shifted to the left or right on the current line.

…

This property specifies whether a box should float to the left, right, or not at all.

The float property pulls an element out of the normal flow and places it in either the left or right ends of the current line inside its containing block element. Other elements will then wrap around the floated element, providing they have enough space to do so (if the cumulative width of the elements is too wide, they will slide to the next line).

Floating is a useful technique when an elements needs positioning in the opposite direction of the normal text-flow, or when text needs to be placed near an image.

Examples:

I am a right-floated span!1. Look to the right.

2. This is text wrapped near
a floated image.

It’s important to emphasis that the floated element will position itself to the side of the current line. The most common mistake is to place a right-floated element after the text it’s supposed to float near. The intuitive thinking behind this is that the right-floated element appears to the right of the text, and hence should be placed after it (logical for a left-to-right language). However, for the float to be floated to the right of the text it actually needs to be placed before it, since it will be floated for the line it is placed in.

Examples:

Same line

I am a right-floated span!1. The floated element is written before the text.

Two lines due to misplaced float

2. The floated element is written after the text.I am a right-floated span!

Same line

I am a right-floated span! I am a right-floated span! 3. Combination example. Both floats were written before the text.

The complementary property to ‘float’ is ‘clear’. The ‘clear’ property cancels a float to either side or both. Using the float image example from before:

This is some more text wrapped near
a floated image. If I place an element with
a

The w3c standards declare that the ‘clear’ property only applies to block elements, however some non-standards compliant browsers ( * cough * IE6) will also apply it to inline elements.

A standard use for the ‘clear’ property is to prevent a block-element from collapsing if it contains only floats. For example we want to draw a border around two float:

But the border has collapsed, as the floats are outside of the normal flow of elements. To force the div to consider the actual height of the floats, we use another element to clear the float property:

There is an alternative technique for achieving the same results which involves using the ‘overflow’ property in combination with giving the containing element ‘layout’, which is explained in detail over at quirksmode - Clearing the floats.

Floats have additional uses in more advanced layout techniques, such as CSS columns and CSS table replacements. Along with the ‘position’ property, they are amongst the most powerful positioning properties for CSS layouts.

For more reference material:
maxdesign on floats - extremely comprehensive
Smashing Magazine on CSS Float theory - A collection of references to more references
The w3c standards guide, Visual formatting model