Стандартизован сброс обтекания (clearfix)

При вёрстке веб-страниц часто требуется гарантировать, что плавающие (float-) элементы целиком уместятся по высоте в содержащем их элементе-контейнере и при этом не повлияют на применение к нему стилей (например, фонового цвета). Многие годы единственным стандарти­зированным механизмом такого рода было CSS-свойство clear, позволявшее сбросить обтекание элементов, расположенных в документе перед соответ­ствующим элементом.

Новое значение flow-root CSS-свойства display позволяет явным образом ограничить область расположения плавающих блоков произвольным HTML-элементом, превратив его в изоли­рованный блочный контекст формати­рования, и уже доступно в Firefox Nightly.

Прежние подходы

До текущего момента веб-разработчики были вынуждены привязывать сброс обтекания к семантически бессмыс­ленному пустому элементу, располо­женному в конце соответ­ствующего контейнера (а после появления и широкого распро­странения IE8 — к CSS-псевдо­элементу), либо использовать не по назначению другие возможности CSS с неизбежными побочными эффектами — например, overflow: hidden.

Пожалуй, наиболее широко сейчас применяется метод с исполь­зованием псевдо­элемента, исторически получивший название clearfix.

Препроцессоры

Хотя благодаря CSS-пре­про­цессорам типа SCSS для применения сброса обтекания к конкретному контейнеру достаточно просто подключить небольшой mixin, это было не очень удобно, т. к., в частности, регулярно приводило к ситуациям, когда веб-разработчик пытался использовать тот же псевдо­элемент (уже «израсхо­дованный» для сброса обтекания) для других целей.

Стандартизация

Спустя всего 20 лет после создания CSS задача ограничения области обтекания пределами заданного элемента наконец получила легитимное, стандарти­зированное решение. Черновая спецификация «CSS Display Module Level 3» определяет новое значение CSS-свойства display — flow-root, пред­назна­ченное именно для явного создания изолиро­ванного блочного контекста.

Ранее для аналогичной цели пред­пола­галось исполь­зовать свойства min-height и min-width со значением contain-floats, что было описано в черновой спецификации «CSS Intrinsic & Extrinsic Sizing Module Level 3» от сентября 2012 года. Но впоследствии от странноватой идеи помещать в свойства min-height и min-width нечисловые значения, не имеющие смысла для родственных свойств height и width, было решено отказаться в пользу более подходящего по смыслу свойства display.

Спецификация «CSS Display Module Level 3» находится в разработке с сентября 2014 года и до сих пор имеет статус черновика (draft), но после публикации очередного предложения (proposal) на форуме WICG (официального «инкубатора» идей W3C) Таб Аткинс (Tab Atkins), один из редакторов спефи­цикаций CSS, подтвердил, что часть спецификации, посвящённая display: flow-root, уже вполне стабильна и готова к реализации в веб-браузерах.

Реализации

После этого публикация соответ­ствующих запросов на реализацию функцио­нальности (feature request) для всех основных браузеров и движков (Firefox, Chromium, WebKit, Edge) была делом техники (хотя примени­тельно к продукту Microsoft не обошлось без таких характерных сюрпризов, как неожиданные трудности при авторизации, «подвисания» браузера и необходимость использовать для feature-request’ов отдельный сайт UserVoice, т. к. баг-трекер Microsoft, как выяснилось опытным путём, пред­назначен исклю­чительно для багов).

Более того, спустя всего три недели возможность уже была реализована в Firefox Nightly и будет доступна в стабильных выпусках Firefox начиная с версии 53, выход которой запланирован на 18 апреля 2017 года. Причём в первой реализации была досадная ошибка: блочный элемент, снабжённый объявлением display: flow-root, вместо ожидаемой для блочных элементов ширины 100% получал ширину по содержимому (подобно таблицам); но этот баг был оперативно устранён.

Остаётся надеяться, что разработчики других браузеров не заставят себя ждать и последуют примеру Mozilla.

Обновлено (): Поддержка display: flow-root реализована в Chromium и будет доступна в стабильных сборках Chrome начиная с версии 58, выпуск которой ожидается в . Протес­тировать функцию сейчас можно с помощью пред­вари­тельных сборок Chrome Canary.

Обновлено (): Поддержка display: flow-root доступна в Opera 45 (сейчас доступны пред­вари­тельные Developer-сборки), основанной на Chromium 58.