Верх страницы
Обложка к записи Новый способ очистки «плавающих» блоков
Время для прочтения: 0 мин. 20 сек.

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

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

Ссылки

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

Русский разработчик с 20-ти летним стажем. Работаю с PHP, ООП, JavaScript, Git, WordPress, Битрикс, Joomla, Drupal, Opencart, DLE, Laravel, Moonshine, SuiteCRM.

Оптимизирую сайты под Google Page Speed, настраиваю импорты для больших магазинов на WooCommerce + WP All Import. Пишу плагины на заказ. Все мои услуги.

Веду блог о разработке, дайджест в телеграмме и в ВК.

Вы всегда можете нанять меня.

Комментарии
Подписаться
Уведомить о
guest

0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
Предыдущая запись
Следующая запись

Давайте дружить
в Телеграме

Авторский блог вашего покорного слуги в Telegram про web, программирование, алгоритмы, инструменты разработчика, WordPress, Joomla, Opencart, Laravel, Moonshine, фильмы и сериалы