Compass / Blurprint 的 +clearfix 到底有什么作用？

发布于 2024-10-01 01:20:04 字数 343 浏览 6 评论 0原文

通常，我使用 div 来清除浮点数

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

在 Compass / Blueprint 中，有一个

+clearfix

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

原文

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 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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

二智少女 2024-10-08 01:20:04

我正在运行 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。

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.

回复收藏 0 原文

秋凉 2024-10-08 01:20:04

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

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

这段代码在 element.clearfix 之后生成一个不可见的块元素，它清除了浮动。可能还需要一些额外的技巧才能使其在 IE 中工作。 8. 您不会在 Firebug 中看到任何内容，因为它不显示生成的内容。

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.

回复收藏 0 原文

~没有更多了~