Форматирование блочного контекста

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

Блочный контекст форматирования создается как минимум одним из следующих способов:

Корневой элемент документа (<html>).
Плавающие элементы (элементы, где float не none).
Элементы со свойством абсолютного позиционирования (элементы, где position задано как absolute или fixed).
Элементы типа inline-block (элементы со свойством display: inline-block).
Ячейки таблицы (элементы со свойством display: table-cell, которое является значением по умолчанию для ячеек HTML-таблицы).
Заголовки таблицы (элементы со свойством display: table-caption, которое является значением по умолчанию для заголовков HTML-таблиц).
Анонимные ячейки таблицы, неявно созданные элементами со свойством display: table, table-row, table-row-group, table-header-group, table-footer-group (которые являются значениями по умолчанию для HTML-таблиц, строк таблиц, тел таблиц, заголовков таблиц и подвалов таблиц соответственно) или inline-table.
Блочные элементы, где overflow имеет значение, отличное от visible и clip.
Элементы со свойством display: flow-root.
<button> элементы и типы кнопок <input>, использующие display: flow-root по умолчанию.
Элементы со свойством contain: layout, content, или paint.
Элементы flex (прямые дочерние элементы элемента со свойством display: flex или inline-flex), если они не являются контейнерами flex, grid или table.
Элементы grid (прямые дочерние элементы элемента со свойством display: grid или inline-grid), если они не являются контейнерами flex, grid или table.
Контейнеры multicol (элементы, где column-count или column-width не auto, включая элементы со свойством column-count: 1).
column-span: all, даже если элемент column-span: all не находится внутри контейнера multicol.

Форматирующие контексты влияют на расположение, потому что элемент, создающий новый блочный контекст форматирования:

содержит внутренние плавающие элементы.
исключает внешние плавающие элементы.
подавляет объединение отступов.

Контейнеры flex и grid, определенные путем задания свойства display элементам со значениями flex, grid, inline-flex, или inline-grid, создают новый контекст форматирования flex или grid. Они похожи на блочный контекст форматирования, за исключением того, что внутри контейнера flex или grid нет плавающих дочерних элементов, но эти контексты форматирования исключают внешние плавающие элементы и подавляют объединение отступов.

Примеры

Давайте рассмотрим несколько примеров, чтобы увидеть эффект создания нового BFC.

Содержать внутренние плавающие элементы

В приведенном примере содержимое, которое имеет плавающее поведение, имеет такую же высоту, как и содержимое рядом с ним. Мы имеем плавающий элемент внутри <div> с применением свойства border. Содержимое этого <div> плавает рядом с плавающим элементом. Поскольку высота плавающего содержимого больше, чем высота содержимого рядом с ним, граница <div> теперь проходит через плавающий элемент. Как объясняется в руководстве по элементам внутри и вне потока, плавающий элемент был выведен из потока, поэтому background и border <div> содержат только содержимое, а не плавающий элемент.

overflow: auto

Установив overflow: auto или задав другие значения, отличные от начального значения overflow: visible, создаётся новый BFC, содержащий плавающий элемент. Наш <div> теперь становится мини-макетом внутри нашего макета. Любой дочерний элемент будет содержаться внутри него.

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

display: flow-root

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

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

Наименование значения flow-root имеет смысл, когда вы понимаете, что вы создаёте нечто, что действует как элемент root (элемент <html> в браузере) с точки зрения того, как он создаёт новый контекст для форматирования потока внутри него.

Это поведение по умолчанию для элементов <button> и типов кнопок <input>, то есть кнопки создают новый BFC, пока их display не будет установлено на значение, которое не создаёт BFC автоматически.

HTML

<section>
  <div class="box">
    <div class="float">I am a floated box!</div>
    <p>I am content inside the container.</p>
  </div>
</section>
<section>
  <div class="box" style="overflow:auto">
    <div class="float">I am a floated box!</div>
    <p>I am content inside the <code>overflow:auto</code> container.</p>
  </div>
</section>
<section>
  <div class="box" style="display:flow-root">
    <div class="float">I am a floated box!</div>
    <p>I am content inside the <code>display:flow-root</code> container.</p>
  </div>
</section>

CSS

section {
  height: 150px;
}
.box {
  background-color: rgb(224 206 247);
  border: 5px solid rebeccapurple;
}
.box[style] {
  background-color: aliceblue;
  border: 5px solid steelblue;
}
.float {
  float: left;
  width: 200px;
  height: 100px;
  background-color: rgb(255 255 255 / 50%);
  border: 1px solid black;
  padding: 10px;
}

Исключение внешних плавающих элементов

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

HTML

<section>
  <div class="float">Try to resize this outer float</div>
  <div class="box"><p>Normal</p></div>
</section>
<section>
  <div class="float">Try to resize this outer float</div>
  <div class="box" style="display:flow-root">
    <p><code>display:flow-root</code></p>
  </div>
</section>

CSS

section {
  height: 150px;
}
.box {
  background-color: rgb(224 206 247);
  border: 5px solid rebeccapurple;
}
.box[style] {
  background-color: aliceblue;
  border: 5px solid steelblue;
}
.float {
  float: left;
  overflow: hidden; /* required by resize:both */
  resize: both;
  margin-right: 25px;
  width: 200px;
  height: 100px;
  background-color: rgb(255 255 255 / 75%);
  border: 1px solid black;
  padding: 10px;
}

Предотвращение объединения отступов

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

Пример объединения отступов

В этом примере у нас есть два смежных элемента <div>, у каждого из которых вертикальный отступ 10px. Из-за объединения отступов вертикальный зазор между ними составляет 10px, а не 20px, как можно было бы ожидать.

<div class="blue"></div>
<div class="red"></div>

.blue,
.red {
  height: 50px;
  margin: 10px 0;
}

.blue {
  background: blue;
}

.red {
  background: red;
}

Предотвращение объединения отступов

В этом примере мы оборачиваем второй <div> во внешний <div>, и создаем новый BFC, используя overflow: hidden на внешнем <div>. Этот новый BFC предотвращает объединение отступов вложенного <div> с отступами внешнего <div>.

<div class="blue"></div>
<div class="outer">
  <div class="red"></div>
</div>

.blue,
.red {
  height: 50px;
  margin: 10px 0;
}

.blue {
  background: blue;
}

.red {
  background: red;
}

.outer {
  overflow: hidden;
  background: transparent;
}

Спецификации

Спецификация
CSS Display Module Level 3 # block-formatting-context

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Block_formatting_context