• 9 минут чтения

• CSS, макеты, браузеры

• Поделись Твиттер, Линкедин

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

В этой статье я объясню, что такое BFC, на примерах, которые, вероятно, вам знакомы. Затем я покажу вам новое значение отображения, которое действительно имеет смысл только тогда, когда вы понимаете, что такое BFC и зачем он вам может понадобиться.

Что такое БФК?

Как ведет себя блочный контекст форматирования (BFC), проще всего понять на простом примере с плавающей запятой. В приведенном ниже примере у меня есть поле, содержащее изображение, которое было перемещено влево, и некоторый текст. Если у нас есть достаточное количество текста, он обтекает плавающее изображение, а затем граница проходит вокруг всей партии.

<div class="outer">
      <div class="float">I am a floated element.</div>
      I am text inside the outer box.
    </div>

.outer {
      border: 5px dotted rgb(214,129,137);
      border-radius: 5px;
      width: 450px;
      padding: 10px;
      margin-bottom: 40px;
    }

    .float {
      padding: 10px;
      border: 5px solid rgba(214,129,137,.4);
      border-radius: 5px;
      background-color: rgba(233,78,119,.4);
      color: #fff;
      float: left;
      width: 200px;
      margin: 0 20px 0 0;
    }

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

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

Есть два способа, которыми мы обычно решаем эту проблему макета. Можно было бы использовать хак clearfix, который имеет эффект вставки элемента под текстом и изображением и настройки его на очистку обоих. Другой метод заключается в использовании свойства переполнения со значением, отличным от видимого по умолчанию.

.outer {
      overflow: auto;
    }

Причина, по которой переполнение работает таким образом, заключается в том, что при использовании любого значения, отличного от начального значения visible создает контекст форматирования блока, и одна из особенностей BFC заключается в том, что он содержит поплавки.

BFC — это мини-макет в вашем макете

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

BFC предотвращает разрушение полей

Понимание схлопывания полей — еще один недооцененный навык CSS. В следующем примере у меня есть div с серым фоном.

Внутри этого div есть два абзаца. Внешний элемент div имеет нижний край в 40 пикселей; абзацы также имеют верхнее и нижнее поле по 20 пикселей.

.outer {
       background-color: #ccc;
      margin: 0 0 40px 0;
    }

    p {
      padding: 0;
      margin: 20px 0 20px 0;
      background-color: rgb(233,78,119);
      color: #fff;
    }

Поскольку между краем p элемент и поле на внешнем div, они свернутся, и абзацы окажутся на одном уровне с верхом и низом блока. Мы не видим серого цвета над и под абзацами.

Однако если мы сделаем блок BFC, он теперь будет содержать абзацы и их поля, поэтому они не схлопываются, и мы можем видеть серый фон контейнера за полем.

.outer {
       background-color: #ccc;
      margin: 0 0 40px 0;
      overflow: auto;
    }

И снова BFC выполняет эту работу по сдерживанию вещей внутри, не давая им сбежать и высунуться из коробки.

BFC останавливает обтекание содержимого.

Вы также будете знакомы с этим поведением BFC, так как это то, как работает любой макет типа столбца, использующий числа с плавающей запятой. Если элемент создает BFC, то этот элемент не будет оборачивать плавающие элементы. В следующем примере у меня есть такая разметка:

<div class="outer">
      <div class="float">I am a floated element.</div>
      <div class="text">I am text</div>
    </div>

Элемент с классом float перемещается влево, поэтому текст в div, который появляется после него, обтекает float.

Я могу предотвратить такое поведение переноса, сделав div, оборачивающий текст, BFC.

.text {
      overflow: auto;
    }

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

Что еще создает BFC?

В дополнение к использованию overflow для создания BFC некоторые другие свойства CSS создают BFC. Как мы видели, плавание элемента создает BFC. Таким образом, ваш плавающий элемент будет содержать что-либо внутри него.

С использованием position: absolute или position: fixed на элементе.

С использованием display: inline-block, display: table-cell или display: table-caption. То table-cell и table-captions являются значениями по умолчанию для этих HTML-элементов, поэтому, например, если у вас есть таблица данных, каждая ячейка создаст BFC.

С использованием column-span: all, который используется для охвата столбцов многоколоночного макета. Элементы Flex и Grid также создают что-то вроде BFC, за исключением того, что они описываются как Контекст форматирования Flex и Контекст форматирования сетки соответственно. Это отражает тип макета, в котором каждый участвует. Контекст блочного форматирования указывает, что элемент участвует в блочном макете, контекст форматирования Flex означает, что элемент участвует в макете Flex. На практике результат тот же: плавающие элементы содержатся, а поля не схлопываются.

Новый способ создания BFC

Есть две проблемы с использованием переполнения или какого-либо другого метода для создания BFC. Во-первых, эти методы имеют побочные эффекты, основанные на том, для чего они действительно были разработаны. Метод переполнения создает BFC и содержит плавающие элементы, однако в некоторых сценариях вы можете обнаружить, что у вас появляется нежелательная полоса прокрутки или обрезаются тени. Это связано с тем, что свойство переполнения предназначено для того, чтобы вы могли сообщить браузеру, что делать в ситуации переполнения — вызывать полосу прокрутки или обрезать содержимое. Браузер делает именно то, что вы ему сказали!

Даже в ситуациях, когда вы не получаете каких-либо нежелательных побочных эффектов, использование переполнения может сбить с толку другого разработчика. Почему для переполнения установлено значение авто или прокрутка? Каковы были намерения первоначального разработчика? Им нужны полосы прокрутки в этом компоненте?

Что было бы полезно, так это метод создания BFC, который в противном случае был бы инертным, не вызывая другого поведения, кроме создания этого мини-макета, и возможность безопасного выполнения вещей внутри него. Этот метод не вызовет никаких непредвиденных проблем, а также позволит прояснить, что задумал разработчик. Рабочая группа CSS подумала, что это тоже может быть очень удобно, и поэтому у нас есть новое значение display имущество — flow-root.

Вы бы использовали display: flow-root в любой из описанных в этой статье ситуаций, когда создание нового BFC было бы выгодно — для содержания плавающих элементов, для предотвращения схлопывания полей или для предотвращения того, чтобы элемент обертывал плавающий элемент.

Вы можете увидеть все это в CodePen ниже, если у вас есть браузер, который поддерживает display: flow-root например, обновленный Firefox или Chrome.

Поддержка браузера для отображения: поток-корень

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

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

(ык, иль)