Float and Clear

18 Oct 2011 by Shingo Tamura

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, connecting it 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 that float achieves. 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 clearcomes in.

Clear the side-effect of float

clear offsets 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

This tutorial - Float and Clear - is intended to provide simple direction for the structural development of websites in CSS. I hope this has assisted you.

About the Author

Shingo Tamura photo

Shingo Tamura is a web developer based in New Zealand with 8+ years of experience in web development. Shingo is capable of dealing with a wide range of web or non-web technologies, and has a passion for HTML, CSS, JavaScript and Web Usability.

Follow him on Twitter at shingokko.

Rate This Posting

blog comments powered by Disqus

Related Blog Posts