960 grid clearfix vs HTML5 Boilerplate clearfix - В чем разница?

960 grid clearfix vs HTML5 Boilerplate clearfix - Какая разница?

Здесь clearfix найдено в сетке Nathan Smith 960 css:

/* 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;
}

и вот clearfix, найденный в Paul Irish HTML5 Boilerplate:

/* 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; }

Как вы можете видеть, они очень похожи. Однако они разные.

Кто-нибудь может понять это?

Что лучше и почему?

Ответ 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; }

Подробности находятся на этом посте Николаса Галлахера