Юрий Матюхин

Время обновить clearfix

Clearfix — вспомогательный класс в css, с помощью которого мы исправляем схлопывающиеся размеры контейнера у плавающих элементов.

 

Clearfix раньше

Если вы знаете что такое clearfix, то вероятно вы читали о нем в старых статьях и книгах. В которых встречали следующий код или его разновидности:

.clearfix {
    zoom: 1;
}
.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}

Он рабочий, но проблема в том, что он поддерживает устаревшие IE 6/7. Вы еще поддерживаете эти браузеры?

Clearfix сейчас

Если у вас поддержка браузеров начиная с IE 8, то воспользуйтесь сокращенной версией:

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

Немножко экономии и эстетической красоты 😊
Я редко пользуюсь этим классом, ведь установив у контейнера значение overflow в hidden или auto мы добиваемся тех-же результатов.
А вы используете clearfix css в своих проектах? 😉

UPD #1: Хорошая статья про виды clearfix и их работе можно прочитать в этой статье.

Read more!