Новый способ очистки «плавающих» блоков

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/

Михаил Кобзарёв

Суровый русский тимлид. Жил в Магадане, в офисе московских веб студий и в Тульской деревне. Виртуозно знает WordPress, PHP, ООП, Vue.js и вот это вот все. Делает крутые высоконагруженные сайты, поэтому уже почти захватил весь рынок WordPress разработки в России. Не дает никому делать сайты без спроса. Ведет блог о разработке, дайджест в телеграмме и в ВК. Любит сиськи, баню и радиоэлектронику. 100% патриот (но это не точно). Тролль 542 уровня. Ездит в отпуск раз в 5 лет.

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

%d такие блоггеры, как: