Hello readers !

Today We will discuss about clearfix

If you have any floating div inside a container and want to clear the floats normally you may are using clear:both class because this is simplest and most common way to solve this. But it's a very old technique.

But Instead of this smart coders now days use clearfix css technique. This allows you to contain floating div without extra structural markup. basically its works on pseudo-elements.

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

But some older versions of IE do not support it. So you have to add some extra CSS for IE and other older browsers.

.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }
.cf { zoom: 1; }

Its called Micro Clearfix.

An another example of clearfix class.

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */