_clearfix.sass

// `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

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