960 grid's clearfix vs HTML5 Boilerplate's clearfix - 有什么区别？答案

【问题标题】：960 grid's clearfix vs HTML5 Boilerplate's clearfix - What's the difference?960 grid's clearfix vs HTML5 Boilerplate's clearfix - 有什么区别？
【发布时间】：2011-09-25 08:33:48
【问题描述】：

960 grid's clearfix vs HTML5 Boilerplate's clearfix - 有什么区别？

这是在 Nathan Smith 的 960 网格的 css 中找到的 clearfix：

/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */

.clearfix:before,
.clearfix:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

.clearfix:after {
  clear: both;
}

/*
  The following zoom:1 rule is specifically for IE6 + IE7.
  Move to separate stylesheet if invalid CSS is a problem.
*/

.clearfix {
  zoom: 1;
}

这是在 Paul Irish 的 HTML5 Boilerplate 中找到的 clearfix：

/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements.
   j.mp/bestclearfix */

.clearfix:before, .clearfix:after {
    content: "\0020"; 
    display: block; 
    height: 0; 
    overflow: hidden;
}

.clearfix:after { clear: both; }

/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */

.clearfix { zoom: 1; }

如您所见，它们非常相似。但是它们是不同的。

有人对此有任何见解吗？

哪个更好，为什么？

【问题讨论】：

标签： css grid boilerplate 960.gs clearfix

【解决方案1】：

唯一的区别是 960 里面有这个 .clearfix:before, .clearfix:after:

visibility: hidden;
width: 0;

除此之外，它们是相同的。

height: 0; overflow: hidden 应该消除任何其他声明来隐藏伪元素的需要。

我的理论是 HTML5 Boilerplate 人员已经严格验证这两个额外的声明对于任何浏览器都不是必需的，然后将它们删除。

【讨论】：

【解决方案2】：

我们的 clearfix 已更新为：

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }  
.clearfix { zoom: 1; }

详情请见this post by Nicolas Gallagher

【讨论】：

在我看来 :before 声明超出了 clearfix 的范围。它的实际声明目的与利润崩溃有关。我使用 :before 和 :after 生成的内容足够多，以至于我不希望在我可能不需要它们时任意使用它们。我想要一个 clearfix 来修复浮动清除。就这些。所以这可以进一步简化为：.clearfix:after { content: ""; display: table; clear: both; } .clearfix { zoom: 1; }
:before 增加了 IE6/7 的浮动渲染和其他浏览器的视觉一致性。如果你不想这样，是的，它肯定可以缩短。