Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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;
}
@parweb

This comment has been minimized.

Copy link

commented Apr 26, 2011

for me the best trick is:

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

This comment has been minimized.

Copy link
Owner Author

commented Apr 26, 2011

@parweb That expression is longer although it's unlikely you'd need the font part when using a div. However, by using an element like div the technique becomes more brittle because someone may choose to style div within an element receiving the clearfix class. If you were to write some CSS like

.container > div {border:5px solid red; min-height:100px;}

Then your clearing div is going to get those extra styles in IE7. This is why we are using br. It's safer and easier

@parweb

This comment has been minimized.

Copy link

commented Apr 26, 2011

thank for the precision ;)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.