Clearfix сетки 960 и clearfix HTML5 Boilerplate — в чем разница?

Clearfix сетки 960 и clearfix HTML5 Boilerplate — в чем разница?

Вот исправление, найденное в css сетки 960 Натана Смита:

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

а вот исправление, найденное в 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; }

Как видите, они ОЧЕНЬ похожи. Однако они разные.

Есть ли у кого-нибудь понимание этого?

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


css boilerplate grid clearfix 960.gs
person Johnny    schedule 29.06.2011    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Единственная разница в том, что у 960 внутри .clearfix:before, .clearfix:after есть это:

visibility: hidden;
width: 0;

В остальном они идентичны.

height: 0; overflow: hidden должен устранить необходимость в любых других объявлениях для сокрытия псевдоэлементов.

Моя теория заключается в том, что ребята из HTML5 Boilerplate строго проверили, что эти два дополнительных объявления не требуются для любого браузера, а затем удалили их.

person thirtydot    schedule 29.06.2011

arrow_upward
5
arrow_downward

Наше ясное исправление было обновлено до этого:

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

Подробности в этой публикации Николаса Галлахера

person Divya Manian    schedule 30.06.2011
comment
Мне кажется, что объявление :before выходит за рамки clearfix. Его фактическая заявленная цель связана с разрушением полей. Я использую :before и :after сгенерированный контент достаточно, чтобы не использовать их произвольно, когда они мне могут не понадобиться. Я хочу, чтобы clearfix исправлял очистку с плавающей запятой. Вот и все. Таким образом, это можно было бы упростить до: .clearfix:after { content: ""; display: table; clear: both; } .clearfix { zoom: 1; } - person Miriam Suzanne; 13.07.2011
comment
:before добавляет визуальную согласованность между рендерингом плавающих элементов в IE6/7 и другими браузерами. Если вы этого не хотите, да, это может быть определенно сокращено. - person Divya Manian; 14.07.2011