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.


Floated image 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:

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

clear property, I cancel the float. (cleared)

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:

I float left!
I float right!



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:

I float left!
I float right!
I am an element with a clear 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

To know when the next article is published, please subscribe to new articles using your Email below or follow me on Twitter.

Subscribe to Blog via Email

Enter your email address to receive notification about new posts.