Автоматическая отмена обтекания дочерних элементов.

Источник: Force Element To Self-Clear its Children.
Автор:  Chris Coyier.
Перевод: .

Рассматриваемый в статье CSS прием уже достаточно долгое время известен как Clearfix хак. Вот его код:

.clearfix:after {
visibility: hidden;
display: block;
content: " ";
font-size: 0;
height: 0;
clear: both;
}
.clearfix { display: inline-block; }
/* начало закомментированного хака backslash \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* конец закомментированного backslash хака */

Для того, чтобы автоматически отменить обтекание всех блочных элементов внутри определенного контейнера, нужно просто задать ему этот класс — clearfix. Это доработанная версия оригинального кода, автором которой является известный разработчик Джеф Стар. (*Все подробности, касающиеся этой версии хака clearfix рассмотрены в авторской статье Джефа Стара, перевод которой можно увидеть здесь.).

Но и этот вариант кода можно несколько упростить, избавившись от фрагмента, который отвечал за поддержку класса в практически не использующемся IE для Macintosh, находившийся в рамках комментария /* backslash hack\ */:

.clearfix:after {
visibility: hidden;
display: block;
content: " ";
font-size: 0;
height: 0;
clear: both;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

В рассмотренную выше версию хака светилами веб-разработки мирового уровня постоянно вносились изменения. Так, Николас Галлахер (Nicolas Gallagher) предложил отказаться от включения в документ вообще какого-либо содержания, определяемого свойством content, используя для его значения пустую строку "", даже не содержащую пробела (как это было в предыдущей версии). Если для форматирования не применяется какой-либо текст, то будет логичным отказаться и от свойства font-size (Крис Койер / Chris Coyier). По мнению Дэна Седерхольма (Dan Cenderholm), более приемлемым именем для класса является group. В результате имеем следующий код:

.group:after {
visibility: hidden;
display: block;
content: "";
height: 0;
clear: both;
}
* html .group { zoom: 1; } /* IE6 */
*:first-child+html .group { zoom: 1; } /* IE7 */

Если же вы решили не поддерживать в своих проектах IE6 и/или IE7, то можете убрать соответствующие строки.

Следующие нововведения были предложены Николасом Галлахером в 2011 году. Более подробная информация по этому вопросу находится в этой статье. Вот предлагаемый им улучшенный вариант кода:

.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1; /* For IE 6/7 (устанавливает свойство hasLayout) */
}

И последняя на данный момент (*см. дату публикации статьи) версия класса group, датированная августом 2012 года:

.group:after {
content: "";
display: table;
clear: both;
}

В этом варианте для достижения желаемого результата используется минимум необходимых средств, к тому же он поддерживается всеми современными браузерами, включая IE начиная с восьмой версии.

* Примечание переводчика.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *