960格的clearfix与HTML5 Boilerplate的clearfix有什么区别？

Question

960 grid 的 clearfix 和 HTML5 Boilerplate 的 clearfix - 有什么区别？

这里是 Nathan Smith 的 960 grid 的 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; }

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

有人对此有什么见解吗？

哪个更好，为什么？

- Johnny

Answer 1

唯一的区别在于960的内部有这个：.clearfix:before, .clearfix:after：

visibility: hidden;
width: 0;

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

height: 0; overflow: hidden 应该能够消除隐藏伪元素所需的其它声明。

我的理论是，HTML5 Boilerplate 的开发者已经严格验证了这两个额外声明在任何浏览器中都不需要，然后将它们删除了。

- thirtydot

Answer 2

我们的clearfix已更新为：

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

详情请查看Nicolas Gallagher的这篇文章

- Divya Manian

---

在我看来，:before声明不属于clearfix的范畴。它的实际目的与边距折叠有关。我经常使用:before和:after生成的内容，因此我不希望它们在我不需要时被随意使用。我想要一个clearfix来解决浮动清除的问题。就这样。因此，这可以进一步简化为：.clearfix:after { content: ""; display: table; clear: both; } .clearfix { zoom: 1; } - Miriam Suzanne

:before 可以在 IE6/7 中呈现浮动元素和其他浏览器之间添加视觉一致性。如果您不想要这个效果，它肯定可以被缩短。 - Divya Manian