/ 

Время обновить 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 и их работе можно прочитать в этой статье.

⌘ ⌘ ⌘
Поделиться
Отправить
Адекватное подчеркивание ссылок
Фронтенд

Адекватное подчеркивание ссылок

Как исправить поведение text-decoration: underline

За и против. Оформление незагруженных изображений.
Фронтенд

За и против. Оформление незагруженных изображений.

Незагруженные изображение — не та проблема, которую нужно срочно решать. С изображениями есть другая, более важная, проблема.

Управляем поведением font-face в CSS
Фронтенд

Управляем поведением font-face в CSS

Поведением текста, отображаемого во время загрузки font-face, можно управлять с помощью свойства font-display. Как работает и какие значения поддерживет свойсто font-display читайте в статье.

Старт курса по архитектуре JavaScript приложений в SmartJS академии
Фронтенд

Старт курса по архитектуре JavaScript приложений в SmartJS академии

Краткое содержание вводной лекции курса по архитектуре современных JavaScript приложений в SmartJS академии