A common practice nowadays is to clear using a div, br or hr. I am going to Jackie Chan the next person who uses one, serious. Not only does it violate the fundamental rule (HTML is for content, CSS is for presentation) but it is both ugly and unnecessary. I am going to show you how using just CSS, you can produce the same effect, without all the mess!
Let’s say you have a logo and a menu contained in a div named header. The logo is floated left, and the menu is floated right, and the div has a background image. Due to the way browsers deal with floated objects (great explanation, however poor solution) containers don’t “wrap” the floated elements inside it by default. So what you’ll notice is that in this example, the background image on the header will disappear!
The Bad Solutions
Add a <div style=”clear:both”>, <br clear”all” /> or <hr />
A common solution to this has been to add a “clear:both” whether on a div, br, hr or some other wacky tag which is inserted at the bottom of the header div after all the content. This makes the container wrap it’s floated elements. The problem is an emtpy tag has to be brought into the HTML to deal with a styling issue, which is meant to be taken care of in the CSS.
Add a clearfix class
Let’s avoid adding a non-semantic empty tag by adding a non-semantic class, yay! I’d rate this the worst of the lot as it’s trying to be clever by avoiding non-semantic markup yet it adds non-semantic classes (which is just as bad).
Not only that, it doesn’t work in IE6 as it doesn’t support :after, so you have to use a * html hack or a conditional comment to feed it additional rubbish.
The Good Solution
You have an element you want to clear. Firstly, add “overflow:hidden” to the container in the CSS. This generally makes Firefox, Opera and Safari perfect. For IE 6, add a width:100% (or px width if you don’t want 100%) which trips hasLayout, and that does the trick in most cases. If it wants to be a pain, float it. I do it in that order because there is no point floating the container if its not required.