Cross-browser, consistent float-containment methods

contain-floats.css

/* 
 * Containing floats in a consistent manner
 * By Jonathan Neal and Nicolas Gallagher
*/

/* 
 * New block formatting context method
 * IE 6+, Firefox 2+, Safari 4+, Opera 9+, Chrome
*/

.clearfix {
    overflow: hidden;
    /* for IE 6 */
    *zoom: 1;
    /* for IE 6/7 */
    *-ms-inject: expression(this.x||(this.innerHTML+='<br\ style="clear:both;font:0/0">',this.x=1));
}

/* 
 * Clearfix method (contemporary browsers)
 * IE 6+, Firefox 3.5+, Safari 4+, Opera 9+, Chrome
 * (needs old mobile browser testing)
*/

.clearfix {
    /* for IE 6/7 */
    *zoom: 1;
    *-ms-inject: expression(this.x||(this.innerHTML+='<br\ style="clear:both;font:0/0">',this.x=1));
}

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

/* 
 * Clearfix method (increased legacy browser support)
 * IE 6+, Firefox 2+, Safari 4+, Opera 9+, Chrome
*/

.clearfix {
    /* for IE 6/7 */
    *zoom: 1;
    *-ms-inject: expression(this.x||(this.innerHTML+='<br\ style="clear:both;font:0/0">',this.x=1));
}

.clearfix:before,
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden; 
}

.clearfix:after {
    clear: both;
}