0

通常，我使用 adiv来清除浮动

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

在 Compass / Blueprint 中，有一个

+clearfix

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

4

2 回答 2

3

我正在运行 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-layoutmixin 包含在同一目录的部分_hacks.scss中，并且似乎特定于 IE。

于 2010-11-08T12:54:25.217 回答
-1

我的猜测是，它做了这样的事情：

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

此代码在 element.clearfix 之后生成一个不可见的块元素，用于清除浮动。可能还涉及一些额外的 hack 以使其在 IE < 8 中工作。您不会在 Firebug 中看到任何内容，因为它不显示生成的内容。

于 2010-11-06T15:19:39.687 回答