-
-
Save nathansmith/1260785 to your computer and use it in GitHub Desktop.
// `Clearfix | |
//-------------------------------------------------- | |
// Can be added to other style rules via: | |
// | |
// #foobar | |
// @extend .clearfix | |
.clearfix:before, | |
.clearfix:after | |
content: "." | |
display: block | |
overflow: hidden | |
visibility: hidden | |
font-size: 0 | |
line-height: 0 | |
width: 0 | |
height: 0 | |
.clearfix:after | |
clear: both | |
.clearfix | |
zoom: 1 |
/* | |
In a Sass file, if you type... | |
#foobar | |
@extend .clearfix | |
It will output this CSS... | |
*/ | |
.clearfix:before, | |
.clearfix:after, | |
#foobar:before, | |
#foobar:after { | |
content: "."; | |
display: block; | |
overflow: hidden; | |
visibility: hidden; | |
font-size: 0; | |
line-height: 0; | |
width: 0; | |
height: 0; | |
} | |
.clearfix:after, | |
#foobar:after { | |
clear: both; | |
} | |
.clearfix, | |
#foobar { | |
zoom: 1; | |
} |
The display:table
method works fine cross-browser. There is just a very small edge case issue with extra whitespace at the top of the page in ancient versions of Firefox prior to 3.5
I'm updating this comment thread, because I just found a bug with the display:table
approach in jQuery UI.
Example of the bug:
http://codepen.io/anon/pen/gAfkJ
Example of the fix:
http://codepen.io/anon/pen/KoHGc
Open ticket (fixed in jQuery UI 1.10.0)
http://bugs.jqueryui.com/ticket/8442
Granted, this is an edge-case, but it had me debugging for awhile, trying to fix a client's site.
The following code…
.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
content: "";
display: table;
}
Makes the .ui-helper-clearfix
inherit from browser default…
table {
border-collapse: separate;
}
Now, granted everyone usually resets that to…
table {
border-collapse: collapse;
}
Still it's worth being sure the bug is fixed, by adding…
.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
content: "";
display: table;
/* This fixes the bug */
border-collapse: collapse;
}
Hi, I can not solve the problem Chrome and firefox ... only works in IE (10):
html:
ul class='ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-wudget-header ui-corner-all'
css:
.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
content: "";
display:table;
border-collapse: collapse;
}
Before anyone asks, yes I am familiar with the '\0020' (empty whitespace character) and display:table methods, which don't work as reliably cross-browser (older Firefox, etc).
Personally, this is the method I keep coming back to. Not looking to argue or try to change anyone's mind.