Clearing Float Elements

These are old tricks but thought I will share anyway in case it might benefit others. This post gives a good explanation on the downsides of each approaches: http://robertnyman.com/2007/04/12/how-to-clear-css-floats-without-extra-markup-different-techniques-explained/

Approach #1: Use the css overflow property

div.overflow{
  overflow:hidden;
}

Approach #2: Use the css width property

div.full-width{
  width:100%;   
}

Approach #3: Use the css clear property

div.clear-floats{
  clear:both;
}

Approach #4: Use the css :after pseudo-class

div.clear-floats-after:after{
  content:" ";
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
}​

Try it out here: http://jsfiddle.net/ivan_sim/evSEX/