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; }
Подробности находятся на этом посте Николаса Галлахера