Новейшая версия Clearfix-reloaded.

Источник: The very latest clearfix reloaded.
Автор:  Thierry Koblentz.
Перевод: .

Более трех лет тому назад мной была опубликована статья "The very latest new new way to do 'clearfix'" («Последний, супер современный способ создания 'Clearfix'»). Ранее, еще на YUIBlog я написал пост «Clearfix-reloaded и демистификация overflow:hidden». И вот опять я со статьей о Clearfix!

Последний раз, когда речь шла о применении Clearfix в современных браузерах, я рекомендовал использовать следующий код:

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

Вместо версии Micro Clearfix:

.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}

.cf:after {
clear: both;
}

/**
* Только для IE 6/7
* Данное правило активирует свойство hasLayout для обеспечения
* содержания плавающих элементов в этих браузерах.
*/

.cf {
*zoom: 1;
}

Данные изменения вызваны прекращением поддержки старых версий IE, и заключаются они в ненадобности таких элементов кода как zoom:1 и :before, которые использовались исключительно с целью обеспечения кросс-браузерной поддержки.

Что касается zoom:1, то его роль в ранних версиях IE заключалась в активации некоего свойства, известного как hasLayout, которое отвечало за создание чего-то вроде контекста блочного форматирования. Результатом использования содержащего конструкцию zoom:1 хака Clearfix в старых версиях IE, было предотвращение объединения вертикальных полей блока-контейнера, к которому этот хак применен, с полями его первого и последнего дочернего элемента. Что, собственно, и обеспечивает контекст блочного форматирования.

Другими словами, верхнее поле первого дочернего элемента блока-контейнера, как и нижнее поле его последнего дочернего элемента, будут находиться внутри этого самого контейнера.

Решение Николаса Галлахера (Nicolas Gallagher) касательно замены display: block на display: table можно обосновать несколькими причинами:

  • Сокращение объема кода и обеспечение соответствия в визуальном представлении с IE шестой и седьмой версий.
  • Достижение единого визуального представления совместно с другими технологиями содержания плавающих элементов, основанных на создании нового контекста блочного форматирования (подобно overflow:hidden).

Прекращение поддержки IE 6/7 конечно же радует. Но есть и другие нюансы. Как справедливо было отмечено Николасом Бретвизером (Nicolas Breitwieser), действия, которые мы предпринимаем для предотвращения объединения полей (с целью совместимости с другими методами содержания плавающих элементов), в некоторых ситуациях могут принести больше вреда, чем пользы. Это вызвано тем, что боксы одного уровня, к которым применен использующий display: table хак, будут отстоять друг от друга на большее расстояние, чем ожидалось. В этом случае все объясняется отсутствием эффекта «схлопывания» вертикальных полей.

Приведенный ниже пример создан на основе идеи, использованной Николасом Бретвизером в своем Pen-проекте:

<div class="left-column">
<div class="clearfix-using_display-table">
<p>Lorem Ipsum…</p>
<p>Lorem Ipsum…</p>
</div>
<div class="clearfix-using_display-table">
<p>Lorem Ipsum…</p>
<p>Lorem Ipsum…</p>
</div>
</div>
<div class="right-column">
<div class="clearfix-using_display-block">
<p>Lorem Ipsum…</p>
<p>Lorem Ipsum…</p>
</div>
<div class="clearfix-using_display-block">
<p>Lorem Ipsum…</p>
<p>Lorem Ipsum…</p>
</div>
</div>

В левой колонке для отмены обтекания применен clearfix на основе display:table, что исключает объединение вертикальных полей и, как следствие, приводит к появлению дополнительного пространства между двумя контейнерами. В правой колонке все равномерно.

Следует отметить, что «схлопывание» полей — это не баг, а предусмотренная стандартом особенность компоновки, и как видно из примера, она позволяет добиться улучшенного распределения боксов по вертикальной оси.

По этой причине в ходе создания кода Clearfix, на мой взгляд, лучше отдать предпочтение правилу display: block вместо display: table:

.clearfix:after {
content:" ";
display:block;
clear:both;
}

Как было отмечено @kornelski, если поддержка старых версий Opera не входит в ваши планы, то можно также избавиться от пробела в значении свойства content:

.clearfix:after {
content:"";
display:block;
clear:both;
}

Обзор комментариев

Основным аргументом в дискуссии о негативных моментах использования Clearfix является полная его замена соответствующим функционалом Flexbox. Этот вариант становиться еще более приемлемым на фоне того, что поддержка проблемных в данном случае IE9 и IE10 прекращена еще год назад. Однако, что касается Flexbox, то вопрос его полномасштабного кроссбраузерного использования пока остается открытым. Картину как всегда портит IE одиннадцатой версии, хотя у «спартанца» (Edge), призванного заменить все поколение IE, дело обстоит несколько лучше. Тем не менее, не следует сбрасывать со счетов имеющиеся на данный момент flexbox-баги и других, более «благонадежных» браузеров.

Согласен — всегда можно найти обходное решение. Но это не дает нам право однозначно и бесповоротно заявить, что найдена (display:flow-root) или уже «созрела» (Flexbox) окончательная замена старому доброму хаку Clearfix.

Стоит обратить внимание и на display: inline-block, эффект от которого тоже имеет некоторую схожесть с Сlearfix. Однако эта сходство проявляется лишь в некоторых ситуациях. Каждое свойство и/или метод должен использоваться по своему прямому назначению, то есть для тех задач, с которыми он справляется идеально. Что касается inline-block, то это значение в первую очередь предназначено для горизонтального размещения блочных элементов с возможностью присвоения им некоторых свойств строчных элементов, что, само собой, не может обеспечить Clearfix.

Вывод — несмотря на то, что Clearfix все еще остается хаком, отправлять его в отставку еще рановато.

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

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