Опыт использования CSS хака clearfix.

Перевод статьи:  Lessons learned concerning the clearfix css hack.
Автор:  Jeff Starr.

Как и большинство разработчиков, я в своих проектах постоянно применяю хак clearfix. Этот CSS прием также известен как Easy Clearing Hack — метод, использующийся для отмены обтекания блочных элементов <div> без необходимости внесения изменений в исходный HTML код документа. Он с успехом применяется для решения множества задач, связанных с версткой веб-страниц, используя при этом абсолютно кроссбраузерный подход, и является корректным с семантической точки зрения. В течение нескольких последних лет я сталкивался с некоторыми моментами, касающимися хака clearfix, которые имеют как положительный, так и отрицательный эффект. Настоящая статья посвящается моему опыту использования этого хака. К тому же в ней представлен несколько усовершенствованный его вариант.

Использование пробела вместо точки предотвращает нарушение структуры документа.

Давайте рассмотрим первоначальную форму хака clearfix, ранее используемую де факто, которая представлена в одном из первоначальных источников этого метода:

.clearfix:after {
content: "."
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Обратите внимание на значение свойства content. Мною было замечено, что использование точки "." в качестве значения для этого свойства в некоторых случаях приводит к нарушению визуальной структуры документа. Это объясняется тем, что в результате использования такого кода, после блока, к которому применяется класс .clearfix (по причине использования псевдо-элемента .clearfix:after) создается дополнительный блочный элемент (display: block), содержащий точку, который для некоторых браузеров является камнем преткновения. И это касается не только Internet Explorer, а при определенных обстоятельствах, зависящих от используемой разметки страницы, сгенерированная псевдо-точка может вызвать проблемы отображения документа и в Firefox. Для исключения таких ситуаций необходимо заменить значение свойства content: "." на знак пробела content: " ". Результат такого приема проверен и прекрасно работает во всех браузерах. Я успешно его использую при создании класса .clearfix во всех своих проектах. В результате имеем:

/* удаляем точку и заменяем ее на пробел */
.clearfix:after {
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.
.
.

Для полного порядка обнуляем значение высоты шрифта.

Еще один неприятный момент, который связан с совместимостью, решается путем добавления в фрагмент кода свойства font-size с последующим обнулением его значения:

/* нулевое значение высоты шрифта исключает появление потенциальных проблем */
.clearfix:after {
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden;
font-size: 0;
}
.
.
.

Кому-то может показаться, что после предыдущего улучшения (замены точки на пробел), эта мера предосторожности будет излишней (*Как правило, браузеры игнорируют все лишние пробелы, а в нашем случае он таковым и является, что полностью исключает возможность генерации какого либо текста.). Но мне лично все равно, так как я являюсь сторонником идеи использования любых методов при решении вопросов, связанных с кроссбраузерностью и совместимостью своих проектов. И, возможно, мне следовало бы применить этот прием до того, как я решил проблему с заменой значения для свойства content. Суть заключается в том, что нет никакой гарантии того, что какой-нибудь браузер не обработает пустой пробел, как фрагмент текста, поэтому лучше избыточным методом исключить такую вероятность. А вопрос его оправданности оставим на рассмотрение гуру CSS спецификации.

Не пользуйтесь кодом, взятым из непроверенных источников.

Кроме рассматриваемых в данной статье недоработок оригинального кода хака clearfix, которые после наших разбирательств стали очевидными, существует множество источников, как в Интернете, так и в различных печатных изданиях, где вы можете найти не совсем корректный вариант кода clearfix. В качестве примера возьмем достойную внимания книгу J.W. Lowery — «CSS Hack & Filters». Вот что в ней содержится:

.clearItem:after {
content:  . 
clear: both;
height: 0;
visibility: hidden;
display: block;
}

.clearItem { display: inline; }

/* Start Commented Backslash Hack \*/
* html .clearItem, * html .clearItem * {height: 1%;}
.clearItem { display: block; }
/* Close Commented Backslash Hack */

Можете ли вы самостоятельно определить проблемные места в представленном коде. Вообще-то, в этом clearItem хаке присутствуют две ошибки. Первая заключается в некорректном использовании значения inline для свойства display в среднем CSS правиле c селектором .clearItem. Этот вопрос затрагивался ранее в оригинальной статье, где в качестве значения для свойства display в этом случае рекомендуется использовать inline-block, что отменяет обтекание в IE для Macintosh:

.clearItem {display: inline-block;}

Второе упущение мистера Ловери в его cleaItem хаке – наличие селектора * html .clearItem * в следующей строке:

* html .clearItem, * html .clearItem * {height: 1%;}

Для решения поставленной задачи первого селектора здесь вполне достаточно. Второй же селектор предназначен для установки высоты форматируемого блока в 1%
для всех версий IE. Но это, как раз, и является проблемой, на первый взгляд незаметной, но в отдельных случаях катастрофической. После нескольких месяцев использования этой версии хака я выяснил это на своем горьком опыте. В результате чего примерно половина всех посетителей моего сайта (именно те, кто пользуется IE) не имели возможности оставить свой комментарий по той причине, что поля в форме обратной связи были недоступны для них, так как в IE их высота была всего лишь один пиксель 1px. К счастью, мне не понадобилось много времени на поиск виновника проблемы, коим оказался универсальный селектор  * :

* html .clearItem, * html .clearItem * {height: 1%;}

После удаления которого все стало на свои места.

Какой же вывод можно извлечь из этого? Все очень просто – дважды проверяйте используемый вами код и не ищите легкий путь к успеху, который может привести к совершенно иному результату. Постоянно помните, что человеку свойственно ошибаться и даже профессиональные программисты и разработчики могут допустить ошибку. Поэтому будьте осторожны если вы пользуетесь обычным копипастом кода с целью последующего его использования в своих проектах.

Теперь соберем все воедино.

Учитывая все, описанные выше моменты и сделав соответствующие им коррективы в первоначальном варианте хака Easy Clear Method, получим следующий полнофункциональный код clearfix:

/* слегка доработанный, универсальный clearfix хак */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

Вот, собственно, и все. Надеюсь, что приведенный в статье код популярнейшего универсального хака clearfix и сопутствующая информация пойдет вам на пользу.

*Больше информации по этой теме можно найти в статье Криса Койера — Автоматическая отмена обтекания дочерних элементов.

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

Комментариев: 14 на Опыт использования CSS хака clearfix.

  1. Эта статья говорит лишь о том, что вы, ребята, верстать не умеете, т.к. используете все свойства подряд даже не задумываясь.

      1. Есть такое мнение, что 2014 год все меняет. Нет, к сожалению, мы остаемся на месте. Не смотря на все, что предоставляют различные CMS, в большинстве случаев нам приходится извините за выражение «флотать». Есть наметки стандартов на этот счет, но это все в процессе. Тем более, что так называемые «флоты» всегда (мы это время не переживем, уж точно) будут поддерживаться как старыми, так и новыми (в плане совместимости) браузерами. Верстайте, друзья, верстайте.

        1. Т.е. конкретно ответить на вопрос вы не можете? Как нужно, ну хотя бы ссылку на пост или макет сверстанный по стандартам 2014 года дайте если словами не можете объяснить, а то пришли всех обосрали, что все дураки, а ответа на вопрос по сути и не дали? И не понял, что именно нам предоставляют CMS? Про стандарты, если они только в процессе разработки, то вообще не стоит упрекать людей, что вот есть новые стандарты которые работают в одном браузере и так все классно, но все дураки им не пользуются, а верстают флоатами.

      2. Выражаясь вашими словами я не «обосрал всех», а просто перевел статью, написанную профессионалом этого дела. Свой вопрос вы задавали посетителю Sonlix, который собственно и против верстки флотами. Что касается моего мнения, то я его выразил в своем предыдущем комментарии. CMS нам предоставляют автоматический упрощенный способ дизайна, а соответственно и генерацию документов, т.е. проблему флотов они берут на себя. В качестве альтернативы флотам могу посоветовать рассмотреть новую модель бокса flex box и свойство box-sizing, но опять же повторюсь, эти стандарты все еще являются рабочей версией проекта и не утверждены окончательно W3C консорциумом, а значит производители браузеров не обязаны их поддерживать. Хотя в последних версиях это работает.

        1. Извините, если выразился грубо.

          Про CMS все равно не понял, в топовых платных коробочных CMS не чего такого не припомню, все равно получается что верстаешь сначала макет чтобы он работал во всех браузерах которые захотел клиент, а потом уже в этот макет добавляешь модулей CMS которые поваляют удобно управлять сайтом, даже не тех спецу.
          Или я отстал от жизни и сейчас все по другому?

          1. В WordPress, на котором работает мой сайт страницы генерируются с флотами таким образом, как это предусмотрено системой. Соответствующие стили по-необходимости обновляются в файле style.css автоматически. Для своих целей создал отдельный файл стилей и нужные элементы ведут себя так, как мне необходимо.

  2. Мне кажется, что пока рано холиварить на тему использования флотов. без них сейчас не обойтись… Хотя стараюсь в работе приминять их как можно реже. Все чаще использую display inline-block, display table etc.. box-sizing border-box приминяю в подавляющем большинстве случаев. По сабжу. А как вы относитесь к такому решению для clearfix

    .clearfix:after,
    .clearfix:before {
    content: »;
    display: table;
    width: 100%;
    clear: both;
    }

    1. Да, этот вариант, который называется микро Clearfix хаком, предложенный Николасом Галлахером тоже неплох. На мой взгляд, в явном указании ширины псевдо-элементов таблиц нет необходимости, это к тому же в некоторых ситуациях может привести к нежелательному заполнению элементом контейнером области, которая для него не предусмотрена.

      1. Всегда смотрите код CSS сайтов гигантов, особенно новые проекты, там есть чему поучится. А DIV сейчас является самым распространенным элементом для верстки. А как ты его располагаешь это уже дело 10-ое.

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

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