So, you've decided to jump into CSS and start making those cool multi-column layouts - table-less style. But now, those things known as float: left; and float: right; are giving you headaches like crazy. This tutorial is here to help you. I'll show you two methods you can use to bend those headaches to your will!

Preface
As you may know, when you set the display: property of an object (like a paragraph, a div, a span),you have a choice, mainly, between block and inline. The key property when clearing floats is the block property because it will force the float'ed element(s) back into the normal document flow.

Floats take the element out of the document flow, and these methods "put them back in". You won't need to know anything about the former once you put these methods into your document. Let's begin!

Method 1: Use a "clearer" div
You've probably browsed the source of a given HTML page and found this kind of div:

...
<div class="clearer"><!-- --></div>
...

That page is using this method to clear a float or several floats. It's very simple and still quite used. Here's how it works.

As you can see above in the HTML code, I've put the .clearer class right under the last float'ed element. This forces the two elements back into the normal document flow and makes them "inline" elements (side by side).

In the CSS, the .clearer method simply "clears" both floats, and since it's a block, it's like forcing a new line. Think of it like Lego Blocks, there has to be a block on the bottom and the blocks on top have to go along with wherever the bottom block is, so the .clearer method always comes after the two (or three) float'ed elements and says "Hey you, get back in line!"

That's that for that method, now, here's the one that I'm using...

Method 2: The Alsett Clearing Method

The aforementioned method is great and all for clearing floats and it does work, but it also adds an unnecessary div element to your document. Over time, if you have several float'ed elements, the .clearer methods can add up fast, as you'll be forced to put a clearer method after every float to "keep it in line". But there is another way to clear floats that works just as well and doesn't add but one rule to your CSS and not a thing to your HTML. I'm just going to post the code and let you look at this, I'll explain afterwards.

Notice something gone from the HTML markup? Yep, there's no more "clearer" there. In its place, the CSS has one additional rule and that's the "wrapper:after" rule.

Note: I use the wrapper div here since it contains the floats; always have something to contain the elements that are being float'ed and then just use the :after method on that containing element.

First, in plain English, that rule is saying: "After the thing that has an ID of wrapper, clear both floats, add a period, display that period as a block, give it a height of zero and just make it hidden". Remember how I said the block was a key in clearing floats? That's how this works.

By using CSS' content property, we add a period right after the wrapper div and by displaying it as a block, we force the float to "stop" and force it back into the document flow. By giving it a height of zero and hiding it, we just make sure no one sees that period, thus, there's "nothing" there! The floats "just clear"! The clear: both that's there just like the clearer div tells this block to clear both floats.

Which method?

I would personally go with Method 2. This keeps the clearing of the floats in the CSS where it should be and adds nothing to the HTML.

Compare this with the previous method of where, if you didn't like the name .clearer, then you'd have to go through your document and change every instance of .clearer to the new name. Here, though, you simply have to change one rule and you're finished!

Thank you
I hope you've enjoyed reading this as much as I've enjoyed writing this, and I hope this helps you overcome the headache that is floats. Thank you and happy coding.

Replies To: Clearing Floats: Two Methods

So, you've decided to jump into CSS and start making those cool multi-column layouts - table-less style. But now, those things known as float: left; and float: right; are giving you headaches like crazy. This tutorial is here to help you. I'll show you two methods you can use to bend those headaches to your will!

... ...

Which method?

I would personally go with Method 2. This keeps the clearing of the floats in the CSS where it should be and adds nothing to the HTML.

Compare this with the previous method of where, if you didn't like the name .clearer, then you'd have to go through your document and change every instance of .clearer to the new name. Here, though, you simply have to change one rule and you're finished!

Thank you
I hope you've enjoyed reading this as much as I've enjoyed writing this, and I hope this helps you overcome the headache that is floats. Thank you and happy coding.

I knew about both methods but your example helped me figure out how to make use of method 2. Thank you!

Also, what about this:
You can add these two lines to the "wrapper" selector and it should clear the float.