malkomalko
6/22/2011 - 4:19 AM

Cross-browser, consistent float-containment methods

Cross-browser, consistent float-containment methods

/* 
 * 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
*/

.nbfc {
    overflow: hidden;
    /* for IE 6/7 */
    *zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("br")).style.cssText="clear:both;font:0/0 serif");
    /* non-JS fallback */
    *zoom: 1;
}

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

.cf {
    /* for IE 6/7 */
    *zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("br")).style.cssText="clear:both;font:0/0 serif");
    /* non-JS fallback */
    *zoom: 1;
}

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

.cf:after {
    clear: both;
}

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

.cf {
    /* for IE 6/7 */
    *zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("br")).style.cssText="clear:both;font:0/0 serif");
    /* non-JS fallback */
    *zoom: 1;
}

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

.cf:after {
    clear: both;
}