public
Last active

  • Download Gist
_clearfix.sass
Sass
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
// `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
how_to_use.css
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
/*
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;
}

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.

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;
}

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.