css – 960 grid的clearfix vs HTML5 Boilerplate的clearfix – 有什么区别?

前端之家收集整理的这篇文章主要介绍了css – 960 grid的clearfix vs HTML5 Boilerplate的clearfix – 有什么区别?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
960网格的clearfix vs HTML5 Boilerplate的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; }

你可以看到他们非常相似.但是他们是不同的.

有人有任何洞察力吗?

哪个更好?为什么?

解决方法

唯一的区别是960的内部有.clearfix:之前,.clearfix:after:
visibility: hidden;
width: 0;

除此之外,它们是相同的.

身高:0; overflow:hidden应该删除任何其他声明隐藏伪元素的需要.

我的理论是,HTML5 Boilerplate的人们已经严格地验证了这两个额外的声明是不需要任何浏览器,然后删除它们.

猜你在找的CSS相关文章