От автора: в Chrome Canary и ночной сборке Firefox появилось новое значение для свойства display. В рабочем черновике спецификации CSS Display Module Level 3 свойство display: flow-root описывается следующим образом: «Элемент генерирует контейнер, чей контент располагается в потоке. Для контента задается новый контекст форматирования блока.»
Основное направление использования – когда внутри контейнера есть элемент с обтеканием, который выше другого контента. По умолчанию блок не сбрасывает обтекание, и все, что идет после него будет его огибать.
Элемент с обтеканием вырван из потока, из-за чего блок схлопывается
Обычно такую проблему мы решали с помощью clearfix. Этот хак вставляет генерируемый контент и задает ему свойство display: table или display: block, после чего очищает. Блок начинает принимать правильную высоту. В нашем случае рамка будет отображаться ниже элемента с обтеканием, а контент не будет оборачиваться вокруг этого элемента.
Привет, display: flow-root
Если присвоить элементу свойство display: flow-root, оно выполнит очистку за нас. Теперь можно отказаться от clearfix, можно просто применить к контейнеру свойство display со значением flow-root.
|
1 2 3 |
.container { display: flow-root; } |
Рамка сбрасывает обтекание, а контент отображается рядом с вложенным квадратом.
После установки свойства display: flow-root на контейнер
Можете посмотреть парочку демо на CodePen. Чтобы демо заработали, вам понадобится Chrome Canary или ночная сборка Firefox!
В рабочей группе по CSS на GitHub есть тема, где обсуждается более подходящее название для значения. Хотите побыстрее получить поддержку этого свойства? Зайдите на сайт Edge UserVoice и оставьте свой голос.
Автор: Rachel Andrew
Источник: //www.rachelandrew.co.uk/
Редакция: Команда webformyself.
