Перевод статьи: A new micro clearfix hack.
Автор: Nicolas Gallagher.
Здесь можно увидеть результат работы кода Micro clearfix hack.
Поддержка браузерами: Firefox 3.5+, Chrome, Safari 4+, IE 6+, Opera 9+
Метод micro clearfix полностью поддерживается последними версиями всех популярных браузеров и основан на версии хака от Терри Кобленца — clearfix reloaded, в которой было введено использование двух псевдоэлементов — :before и :after.
Ниже представлен обновленный код. Имя класса тоже укорочено:
* Для современных браузеров:
* 1. Включаемый с помощью свойства content пробел это один
* из способов обхода бага в Opera, связанного с атрибутом
* conteteditable, включенным где-либо в другом месте в
* документе. В противном случае это приведет к появлению пробела сверху и
* снизу элемента с классом clearfix.
* 2. Использование значения table вместо block необходимо
* лишь в том случае, когда применяется псевдоэлемент :before
* с целью сохранения верхних полей дочерних элементов.
*/
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* Только для IE 6/7
* Данное правило активирует свойство hasLayout для
* содержания плавающих элементов в этих браузерах.
*/
.cf {
*zoom: 1;
}
Этот код генерирует два псевдоэлемента и устанавливает для каждого из них свойство display со значением table, что позволяет создать анонимный объект таблицы, в данном случае ячейку. Данный подход позволяет создать новый контекст форматирования элемента-контейнера, состоящий из двух компонентов. Первый – псевдоэлемент :before, который предотвращает схлопывание верхних полей (контейнера и дочерних, «плавающих» элементов). И второй – псевдоэлемент :after, собственно и отвечающий за отмену обтекания дочерних элементов. В результате получаем компактный, код хака, не требующий скрытия генерируемого содержимого при помощи свойства visibility: hidden.
Наличие первого :before селектора не обязательно для отмены эффекта обтекания дочерних элементов, он необходим лишь для предотвращения объединения верхних полей, которое имеет место при отображении документа в новых версиях браузеров. У этого метода есть следующие два достоинства:
- Обеспечивается корректное отображение при совместном использовании с другими конструкциями, определяющими собственный контекст форматирования обтекаемых элементов. К примеру, содержащих свойство overflow: hidden;
- Обеспечивается полная функциональность в «проблемных» браузерах
IE 6/7 при наличии строки zoom:1
Применение пробела в качестве значения для свойства content: " " предотвращает проблемы в Opera (так называемый Opera bug). Проблема в этом случае заключается в том, что если где-либо в другом месте документа определен атрибут contenteditable, то этот браузер создает пробелы в указанных местах – перед (:before) и после (:after) форматируемого с помощью clearfix элемента. Особая благодарность Сержио Церутти (Sergio Cerrutti) за помощь в решении данной проблемы. Альтернативным способом в данном случае является определение шрифта нулевого размера.
Ранние версии Firefox.
Для браузера Firefox версии 3.5 и ниже, более предпочтительным будет использование метода «clearfix reloaded», предложенного Терри Кобленцом, в котором предусмотрено свойство visibility: hidden, скрывающее содержащиеся в псевдоэлементах символы. Причина в том, что именно эти, ранние версии Firefox для корректной работы хака требуют, чтобы генерируемые псевдоэлементы содержали символ точки — content: ".". В противном случае при определенных обстоятельствах между основным элементом документа body и его первым дочерним элементом возможно появление нежелательного свободного пространства (вот пример — jsfiddle.net/necolas/K538S/).
Альтернативные методы форматирования элемента-контейнера с целью автоматической отмены обтекания его дочерних элементов, предусматривающие использование свойств overflow: hidden или display: inline-block, также позволяют избежать появления подобного дефекта отображения в ранних версиях Firefox.