Shingo Tamura's Blog

The CSS properties float and clear are useful for positioning elements, if used properly. This article will explain what these properties exactly do and how to use their behaviors to position elements.

float..., what does it do?

An important characteristic of float is that it affects the first element that comes after the floated element. A floated element leaves empty space next to it, and the element that follows after will fill this space making it stuck to the floated element. This happens only if the space is large enough to take the next element. If an element is floated to the left, it will create space on the right (as below):

This may sound strange, but it has its use. For example, if you could use this behavior and position a bunch of elements horizontally like this:

But this is not all. As mentioned above, float affects the element after the floated element. So when the affected element is narrower than the remaining space next to the last floated element, it ends up being placed next to the floated element.

And this is where clear comes in.

Clear the side-effect of float

clear counter-effects this behavior and force the element to come back down to where it's supposed to be. The property lets you specify which side to clear, as in clear:left or clear:right , but it's a lot easier to just use clear:both because you won't need to remember which side you are supposed to clear.

Kinds of things that are possible to create with this technique

• Horizontal menus
• Multi-column layout
• Tagcloud

Hope this helps someone out there.