Question

通常，我使用div来清除花车

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

在Compass / Blueprint中，有一个

+clearfix

它到底是做什么用的？它是否清除了当前的浮动元素，而不是清除上面的浮动？这是否意味着当前元素使用+clearfix，然后是元素以下不必做一个明确的？实际上我没有看到任何clear当前元素或下一个作为使用Firebug的测试，那么它到底是做什么的呢？

Answer 1

我正在运行v0.10.5并且/Library/Ruby/Gems/1.8/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss中的源代码部分为：

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

这是SCSS语法，但它非常类似于您引用的SASS语法。 has-layout mixin包含在同一目录中的_hacks.scss部分中，并且似乎特定于IE。

Answer 2

我的猜测是，它确实是这样的：

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

此代码在element.clearfix之后生成一个不可见的块元素，用于清除浮点数。可能还有一些额外的黑客攻击使其在IE中工作＆lt; 8.您不会在Firebug中看到任何内容，因为它不显示生成的内容。

Compass / Blurprint的+ clearfix究竟做了什么？

2 个答案: