What exactly does Compass / Blurprint's +clearfix do?

Ususally, I use a div to clear the floats

<div style="clear:both"></div>

In Compass / Blueprint, there is a

+clearfix

What exactly does it do? Does it clear the开发者_Python百科 current floating element, instead of clearing the floats up above? Does that mean if the current element use +clearfix, then the elements that follow don't have to do a clear? Actually I don't see any clear for the current element or the next one as a test using Firebug, so what exactly does it do?

I'm running v0.10.5 and the source code partial in /Library/Ruby/Gems/1.8/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss reads:

// This basic method is preferred for the usual case, when positioned
// content will not show outside the bounds of the container.
//
// Recommendations include using this in conjunction with a width.
// Credit: [quirksmode.org](http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html)
@mixin clearfix {
  overflow: hidden;
  @include has-layout;
}

This is the SCSS syntax, but it's pretty directly analogous to the SASS syntax you reference. The has-layout mixin is included in the _hacks.scss partial in that same directory and appears to be specific to IE.

My guess is, it does something like this:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

This code generates an invisible block element after element.clearfix which clears the float. Probably there are also some additional hacks involved to make it work in IE < 8. You won't see anything in Firebug as it does not display generated content.