Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
// `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;
}
Owner

nathansmith commented Oct 4, 2011

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.

necolas commented Oct 4, 2011

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

Owner

nathansmith commented Jan 23, 2013

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

aog1971 commented Sep 20, 2013

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment