Прокрутить к контенту ↓


Стандартизован сброс обтекания (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.