The modern way to clear floats

[SalmanAbbas007]

Many people here still use 10 years old method to clear floats aka ClearFix, using markup. Which is a terrible coding practice.
( something like.. <div class='clearfix'></div> )

So had to share the better way of doing that using CSS psuedo elements:-

.clearfix:after{
  clear: both;
  content: "";
  display: block;
}

Just put this code in your stylesheet and apply 'clearfix' class to the parent element.

Live Demo: http://jsfiddle.net/ccxRJ/1/embedded/result/

Compatibility: IE8+, FF3.5+, Safari 1.3+, Opera 9.5+ and Google Chrome 2+

There is another method but is often problematic:-

.clearfix {
    overflow: hidden;
}

That's all folks, enjoy

P.S: if u don't know what is ClearFix then this tutorial is not for you.

SalmanAbbas007 Reviewed by SalmanAbbas007 on 28th Apr 2011. The modern way to clear floats Many people here still use 10 years old method to clear floats aka ClearFix, using markup. Which is a terrible coding practice. ( something like.. <div class='clearfix'></div> :|) So had to share the better way of doing that using CSS psuedo elements:- .clearfix:after{ clear: both; content: ""; display: block; } Rating: 5