Clearfix больше не нужен?

Clearfix больше не нужен?

От автора: в Chrome Canary и ночной сборке Firefox появилось новое значение для свойства display. В рабочем черновике спецификации CSS Display Module Level 3 свойство display: flow-root описывается следующим образом: «Элемент генерирует контейнер, чей контент располагается в потоке. Для контента задается новый контекст форматирования блока.»

Основное направление использования – когда внутри контейнера есть элемент с обтеканием, который выше другого контента. По умолчанию блок не сбрасывает обтекание, и все, что идет после него будет его огибать.

Clearfix больше не нужен?

Элемент с обтеканием вырван из потока, из-за чего блок схлопывается

Обычно такую проблему мы решали с помощью clearfix. Этот хак вставляет генерируемый контент и задает ему свойство display: table или display: block, после чего очищает. Блок начинает принимать правильную высоту. В нашем случае рамка будет отображаться ниже элемента с обтеканием, а контент не будет оборачиваться вокруг этого элемента.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Привет, display: flow-root

Если присвоить элементу свойство display: flow-root, оно выполнит очистку за нас. Теперь можно отказаться от clearfix, можно просто применить к контейнеру свойство display со значением flow-root.

.container {
  display: flow-root;
}

Рамка сбрасывает обтекание, а контент отображается рядом с вложенным квадратом.

Clearfix больше не нужен?

После установки свойства display: flow-root на контейнер

Можете посмотреть парочку демо на CodePen. Чтобы демо заработали, вам понадобится Chrome Canary или ночная сборка Firefox!

В рабочей группе по CSS на GitHub есть тема, где обсуждается более подходящее название для значения. Хотите побыстрее получить поддержку этого свойства? Зайдите на сайт Edge UserVoice и оставьте свой голос.

Автор: Rachel Andrew

Источник: https://www.rachelandrew.co.uk/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree