Skip to content

Instantly share code, notes, and snippets.

@necolas
Created April 22, 2011 00:36
Show Gist options
  • Save necolas/935783 to your computer and use it in GitHub Desktop.
Save necolas/935783 to your computer and use it in GitHub Desktop.
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
Copy link

parweb 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