Css 960网格'；s clearfix vs HTML5样板文件；s clearfix-What'；有什么区别？

960网格的clearfix与HTML5样板文件的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样板中的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; }

正如你所看到的，它们非常相似。然而，它们是不同的

有人对此有什么见解吗

---

哪个更好？为什么？

唯一的区别是960的内部有这个

。clearfix:before、.clearfix:after

：

visibility: hidden;
width: 0;

除此之外，它们是相同的

高度：0；溢出：hidden

应该不需要任何其他声明来隐藏伪元素

---

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

我们的clearfix已经更新为：

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

---

细节在

上，在我看来：before声明不在clearfix的范围之内。它的实际目的与利润率的崩溃有关。我使用：before和：after生成的内容足够多，当我可能不需要它们时，我不想随意使用它们。我想要一个clearfix来修复浮动清算。仅此而已。因此，这可以进一步简化为：

.clearfix:after{content:”；display:table；clear:both；}.clearfix{zoom:1；}

：before在IE6/7的浮动呈现和其他浏览器之间添加了视觉一致性。如果你不想这样，是的，它可以绝对缩短。