What is Clearfix and How to use it

If you learn by visualize thing. This picture might help you understand : clearfix

A technique commonly used in CSS float-based layouts is assigning a handful of CSS properties to an element which you know will contain floating elements. The technique, which is commonly implemented using a class definition called clearfix, (usually) implements the following CSS behaviors:

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

Or, if you don't require IE<8 support, the following is fine too:

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

Normally you would need to do something as follows:

<div>
    <div style="float: left;">Sidebar</div>
    <div style="clear: both;"></div> <!-- Clear the float -->
</div>

With clearfix, you only need to

<div class="clearfix">
    <div style="float: left;" class="clearfix">Sidebar</div>
    <!-- No Clearing div! -->
</div>

The purpose of these combined behaviors is to create a container :after the active element containing a single '.' marked as hidden which will clear all preexisting floats and effectively reset the the page for the next piece of content.

Share on Google Plus

About Amit

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.