What is it?
I love this bit of script,
.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.clearfix{ display: inline-block;}
html[xmlns] .clearfix { display: block;}
* html .clearfix{ height: 1%;}
.clearfix {display: block}
I use this bit of script on every website I build (as a web developer). I think this is the greatest bit of code to help debug quicker and position better.
I must be honest I got this idea from this site http://www.webtoolkit.info/css-clearfix.html hover there is a tiny difference many people may have been put off by it as it may display an unwanted dot (.), fear not as this content: “\00A0″; does that extra trick, it makes a white space as oppose to a dot.
How does this work?
Well you just add that to your css file and then you can use it as you would with normal class attribute like `<div class=”clearfix”>Content</div>`.
This is especially useful for the following code inspect this on your firebug and I promise you that you will love the result.
<div class="clearfix" > <div style="float: left;">left</div> <div style="float: right;">right</div> </div>
You will quickly discover that the .clearfix div has lost it’s height. due to some bug I couldn’t care much 
but by using clearfix, this will display the div as a block and allow the div to have a height.