--- title: Блочный контекст форматирования slug: Web/Guide/CSS/Block_formatting_context tags: - CSS - CSS Basic Concepts - Для начинающих - Основы translation_of: Web/Guide/CSS/Block_formatting_context ---

{{ CSSRef() }}

Описание

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

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

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

Блочные контексты форматирования важны для размещения плавающих элементов (см. {{ cssxref("float") }}) и отмены их обтекания (см.{{ cssxref("clear") }}) . Правила размещения плавающих элементов и сброса обтекания применяются только к элементам внутри одного и того же блочного контекста форматирования. Плавающие элементы не влияют на размещение содержимого внутри других блочных контекстов форматирования, и отмена обтекания распространяется только на плавающие элементы из того же самого контекста форматирования. Схлопывание внешних отступов тоже происходит только между блоками из одного и того же блочного контекста форматирования.

Примеры

Как сделать плавающему контенту и соседнему с ним контенту одинаковую высоту

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

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

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}}

Использование overflow: auto;

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

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-overflow.html", '100%', 720)}}

Задание overflow: auto создало новый блочный контекст форматирования, включающий float. Теперь div стал мини-слоем внутри нашего слоя. Любые дочерние элементы войдут в него.

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

Использование display: flow-root

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

CSS

.box {
    background-color: rgb(224, 206, 247);
    border: 5px solid rebeccapurple;
    display: flow-root
}
.float {
    float: left;
    width: 200px;
    height: 150px;
    background-color: white;
    border:1px solid black;
    padding: 10px;
}

{{EmbedLiveSample("flowroot", 200, 200)}}

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

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

Примечание:  display: flow-root; не поддерживается в Safari.

Схлопывание границ margin

Создание нового блочного контекста форматирования предотвращает эффект схлопывания границ между двумя соседними div:

HTML

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

CSS

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

.blue {
  background: blue;
}

.red-outer {
  overflow: hidden;
  background: red;
}

{{EmbedLiveSample("Margin_collapsing", 120, 120)}}

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

Статьи по теме