Clearfix — полезный метод для очистки плавающих блоков. Оригинальный clearfix hack работает просто великолепно, но браузеры устаревают, и нужно двигаться в ногу с прогрессом.
Internet Explorer 5 для Mac — это уже история, поэтому нет никакой необходимости беспокоиться об очистке в этом браузере (сугубо личное мнение).
Можно вообще отказаться и от поддержки Internet Explorer 5.5, 6.0, так как доля этих браузеров постоянно снижается и равна менее десяти процентов.
Оригинальный метод очистки плавающих блоков
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-table; }
/* Прячем стили от IE для mac */
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* Конец скрытия стилей */
Конечно, смотрится это ужасно, зато работает, работает, как нужно верстальщику. Логика данного подхода очевидна:
- Для адекватных браузеров срабатывает первое правило — создание скрытого блока после текущего элемента (это аналогично использованию трюка
<br clear="both">, но только без дополнительной разметки). - Вторая декларация (
inline-table) исключительно для IE/Mac. - При помощи обратного слеша (backslash) в комментариях прячем оставшуюся часть правил от IE/Mac.
- Переключаем свойство
<a href="/makeup/on-having-layout.html">hasLayout</a>в IE6, задав высоту, равную 1% (holly hack) - Затем применяем
display:blockдля всех обозревателей, кроме IE/Mac - Последней строкой закрываем хак для IE/Mac
Как вы можете заметить, здесь очень много мусора из-за поддержки «мертвых» браузеров. Сейчас уже никто не использует IE/Mac, поэтому хак, относящийся к нему можно смело удалить. В результате получаем значительно более чистый кусок CSS кода
Современный метод очистки плавающих блоков
/* new clearfix */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
Что изменилось по сравнению с предыдущим методом?
- Выкинули поддержку браузера IE/Mac
- Для браузеров IE6, IE7 включили
hasLayoutпри помощиzoom: 1, используя хак со звездочкой
Если вы боретесь за валидность и чистоту кода, то вместо хаков под IE лучше использовать условные комментарии.
Браузер IE8 уже поддерживает псевдо-класс :after, поэтому в скором времени метод очистки плавающих блоков станет еще проще и понятнее, а динозавры вроде IE6 и IE7 сами собой отомрут.
Прочтите: Чиним решение SelenIT-а по очистке потока, или Новый lol над Opera 12.00
Ссылки
Источник: https://www.kobzarev.com/makeup/new-clearfix-hack/
