Что это — прощание с хаком clearfix?

Источник: The end of the clearfix hack?
Автор:  Rachel Andrew.
Перевод: .

Новое значение свойства display: flow-root реализовано в Chrome Canary и Nightly версиях Firefox. Вот как звучит его определение в редакторском варианте стандарта Display Module Level3:

«Данный элемент генерирует бокс блочного контейнера и размещает свой контент по принципу поточной компоновки. При этом он всегда создает новый контекст блочного форматирования для собственного контента.»

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

Плавающий элемент «выпадает» из потока, что приводит к сужению его родительского бокса.

Мы привыкли решать подобную проблему с помощью Clearfix. Этот хак вставляет в документ генерируемый контент (для которого устанавливается свойство display: table или display: block) и затем с его помощью отменяет обтекание находящихся выше плавающих элементов. Данный прием гарантирует автоматическую отмену обтекания содержащихся в форматируемом боксе смещенных элементов, что в нашем примере приведет к отображению границы бокса-контейнера ниже плавающего элемента, и предотвращению его обтекания следующим за ним контентом.

Появление display: flow-root.

Аналогичного, отменяющего обтекание эффекта мы можем добиться путем использования правила display: flow-root. То есть вместо хака Clearfix, мы (применительно к элементу-контейнеру) задействуем свойство display со значением flow-root:

.container {
display: flow-root;
}

В результате чего граница контейнера «очищает» (или правильнее было бы сказать «ограждает») плавающий элемент от следующего за ним контента, отображая его под содержащимся в боксе-контейнере плавающим элементом.

Так выглядит наш пример после применения к элементу-контейнеру правила display: flow-root.

На CodePen вы можете увидеть серию demo примеров, но имейте в виду, что сегодня для корректного их отображения вам придется использовать Chrome Canary или Firefox Nightly.

See the Pen display: flow-root by rachelandrew (@rachelandrew) on CodePen.

В ветке "CSS Working Group" репозитория GitHub завязалась дискуссия касательно имени соответствующего значения. И если в ближайшем будущем вы желаете увидеть совместимую поддержку данного функционала, советую вам принять участие в проекте Edge UserVoice, проголосовав за введение этого значения.

Обзор комментариев

Существуют различные мнения касательно данного функционала, в том числе ошибочные. Одно из них заключается в том, что значение flow-root способно нанести вред производительности, поскольку в некоторых случаях может понадобиться его совместное применение с другими значениями свойства display в рамках одной декларации. Например, flex и flow-root. Однако это неверно, так как в данном конкретном случае оба значения контролируют внутреннюю компоновку элемента, и применено будет только одно из них, которое встретиться первым.

В ходе обсуждения статьи выяснилось также, что использовать хак Clearfix в качестве временной альтернативы для значения flow-root нельзя, так как Clearfix в отличие от нового значения не создает отдельный блочный контекст форматирования. Но для этого случая отлично подойдет Overflow хак, который создает аналогичную конструкцию. А вот Терри Кобленц (Thierry Koblentz) для имитации применения правила display: flow-root предлагает воспользоваться следующим хаком.

Один из разработчиков создал форк основного демо из статьи, предоставив нашему вниманию серию примеров, иллюстрирующих некоторые другие отличия в поведении различных способов решения данного вопроса. Речь идет как о clearfix-подобных вариантах, так и об их аналогах, создающих новый BFC.

Предложений поступило очень много. Почему бы просто не использовать display: table или overflow: auto. Избавиться от проблемы можно также доработав и улучшив поддержку уже существующего функционала "Flex Box" («Гибкая модель бокса»). Другие разработчики предлагают более радикальный способ, а именно создание нового свойства, которое и должно решить проблему с Clearfix.

Еще один момент. Дело в том, что при использовании jQuery команд скрытия и появления элемента $(".elem").hide() и $(".elem").show(), вторая команда (теоретически) установит значение свойства display как block. Опять же, теоретически. Хотя некоторые отмечают, что flow-root здесь ни причем, и это уже проблема jQuery. Справедливо, конечно.

Основным препятствием использования нового значения является его слабая поддержка и отсутствие обратной совместимости. Через пару лет, когда оно получит твердую поддержку спецификации, его обратную совместимость может с успехом обеспечить какой-нибудь наиболее удачный вариант Clearfix. К примеру, несложный CSS-трюк, представленный Крисом Койером:

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

Поэтому прощаться с этим хаком пока рановато.

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

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