Введение в контексты форматирования

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

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

Контексты форматирования блоков

Наружный элемент в документе, использующий правила вывода блоков, устанавливает первый, или начальный контекст форматирования блоков. Это означает, что каждый элемент внутри <html> элемента выводится согласно нормальному потоку, следуя правилам вывода блоков и инлайнов. Элементы, участвующие в BFC, используют правила, описанные в CSS Box Model, которые определяют, как отступы, границы и отступы элемента взаимодействуют с другими блоками в том же контексте.

Создание нового контекста форматирования блоков

Элемент <html> не является единственным элементом, способным создать контекст форматирования блоков. Любой блочный элемент может быть задействован для создания BFC при применении определённых свойств CSS.

Новый BFC создаётся в следующих ситуациях:

элементы, заданные свойством float
абсолютно позиционированные элементы
элементы со свойством display: inline-block
ячейки таблицы или элементы с display: table-cell, включая анонимные ячейки таблицы, созданные при использовании свойств display: table-*
заголовки таблиц или элементы с display: table-caption
блочные элементы, где overflow имеет значение, отличное от visible
элементы с display: flow-root или display: flow-root list-item
элементы с contain: layout, content, или strict
flex-элементы
элементы сетки
контейнеры многоколонок
элементы с column-span, заданным значением all

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

Примеры создания BFC

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

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

<div class="box">
  <div class="float">I am a floated box!</div>
  <p>I am content inside the container.</p>
</div>

body {
  font: 1.2em sans-serif;
}

.box {
  background-color: rgb(224 206 247);
  border: 5px solid rebeccapurple;
}

.float {
  float: left;
  width: 200px;
  height: 100px;
  background-color: white;
  border: 1px solid black;
  padding: 10px;
}

Создание нового BFC содержало бы плавающий элемент. Традиционный способ сделать это в прошлом — установить overflow: auto или установить другие значения, отличные от начального значения overflow: visible.

body {
  font: 1.2em sans-serif;
}
.box {
  background-color: rgb(224 206 247);
  border: 5px solid rebeccapurple;
  overflow: auto;
}

.float {
  float: left;
  width: 200px;
  height: 150px;
  background-color: white;
  border: 1px solid black;
  padding: 10px;
}

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

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

Явное создание BFC с помощью display: flow-root

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

body {
  font: 1.2em sans-serif;
}
.box {
  background-color: rgb(224 206 247);
  border: 5px solid rebeccapurple;
  display: flow-root;
}

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

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

Контексты форматирования инлайнов

Контексты форматирования инлайнов существуют внутри других контекстов форматирования и могут рассматриваться как контекст абзаца. Абзац создаёт контекст форматирования инлайнов, внутри которого используются такие элементы, как <strong>, <a> или <span> для работы с текстом.

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

<p>
  Before that night—<strong>a memorable night</strong>, as it was to
  prove—hundreds of millions of people had watched the rising smoke-wreaths of
  their fires without drawing any special inspiration from the fact.
</p>

body {
  font: 1.2em sans-serif;
}
p {
  margin-top: 2em;
}
strong {
  margin: 20px;
  padding: 20px;
  border: 5px solid rebeccapurple;
}

Другие контексты форматирования

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

Заключение

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

См. также

© 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_flow_layout/Introduction_to_formatting_contexts