ClearFix

Clearfix

/* http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best */
/*************************
Solution 1 - http://nicolasgallagher.com/micro-clearfix-hack/ 
*****************************/

/* For modern browsers */
.container:before,
.container:after {
    content:"";
    display:table;
}
.container:after {
    clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.container {
    zoom:1;
}


/*************************
Solution 2 - Overflow Property - http://www.quirksmode.org/css/clearing.html
*****************************/
/*Variant 1*/
.container {
    overflow: hidden;
    display: inline-block; /* Necessary to trigger "hasLayout" in IE */
    display: block; /* Sets element back to block */
}

/*Variant 2*/
.container {
    overflow: hidden; /* Clearfix! */
    zoom: 1;  /* Triggering "hasLayout" in IE */
    display: block; /* Element must be a block to wrap around contents. Unnecessary if only using block-level elements. */
}

/*Variant 3 - Not ideal*/
.container {
    overflow: hidden;
    _overflow: visible; /* for IE */
    _zoom: 1; /* for IE */
}

/*************************
Solution 3
*****************************/
.clearfix {
  overflow: auto;
}
 
/* with IE6 support */
.clearfix {
  overflow: auto;
  zoom: 1;
}