Понимание контекста блочного форматирования в CSS

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

Поплавки, абсолютно позиционированные элементы, встроенные блоки, ячейки таблиц, заголовки таблиц и элементы с «переполнением», отличным от «видимого» (кроме случаев, когда это значение было передано в область просмотра), устанавливают новые контексты форматирования блоков.

Приведенная выше цитата в значительной степени подводит итог того, как формируется контекст форматирования блока. Но давайте переопределим его так, чтобы его было легче понять. Контекст форматирования блока — это HTML-блок, который удовлетворяет как минимум одному из следующих условий:

• Значение с float не равно
• Значение position является ни static ни relative
• Значением display является table-cell table-caption , inline-block , flex или inline-flex
• Значение overflow не visible .

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

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

Например, посмотрите на следующий HTML:

 <div class="container"> Some Content here </div> 

Новый контекст форматирования блока можно создать, добавив в контейнер любое из необходимых условий CSS, таких как overflow: scroll , overflow: hidden , display: flex , float: left или display: table . Хотя любое из вышеупомянутых условий может создать контекст блочного форматирования, также будут некоторые другие эффекты, такие как:

• display: table может создавать проблемы в отзывчивости
• overflow: scroll может показывать нежелательные полосы прокрутки
• float: left будет перемещать элемент влево, а другие элементы будут обтекать его
• overflow: hidden будет обрезать элементы, которые переполнены

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

 .container { overflow: hidden; } 

Вы можете свободно играть с объявлениями, отличными от overflow: hidden .

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

Спецификация W3C гласит:

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

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

Контекст форматирования блока вызывает сужение полей

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

Давайте рассмотрим пример, чтобы понять это.

 <div class="container"> <p>Sibling 1</p> <p>Sibling 2</p> </div> 

 .container { background-color: red; overflow: hidden; /* creates a block formatting context */ } p { background-color: lightgreen; margin: 10px 0; } 

 <div class="container"> <p>Sibling 1</p> <p>Sibling 2</p> <p>Sibling 3</p> </div> 

 .container { background-color: red; overflow: hidden; /* creates a block formatting context */ } p { background-color: lightgreen; margin: 10px 0; } 

 <div class="container"> <p>Sibling 1</p> <p>Sibling 2</p> <div class="newBFC"> <p>Sibling 3</p> </div> </div> 

 .container { background-color: red; overflow: hidden; /* creates a block formatting context */ } p { margin: 10px 0; background-color: lightgreen; } .newBFC { overflow: hidden; /* creates new block formatting context */ } 

 <div class="container"> <div>Sibling</div> <div>Sibling</div> </div> 

 .container { background-color: green; } .container div { float: left; background-color: lightgreen; margin: 10px; } 

 .container { overflow: hidden; /* creates block formatting context */ background-color: green; } .container div { float: left; background-color: lightgreen; margin: 10px; } 

 <div class="container"> <div class="floated"> Floated div </div> <p> Quae hic ut ab perferendis sit quod architecto, dolor debitis quam rem provident aspernatur tempora expedita. </p> </div> 

 <div class="container"> <div class="column">column 1</div> <div class="column">column 2</div> <div class="column">column 3</div> </div> 

 .column { width: 31.33%; background-color: green; float: left; margin: 0 1%; } /* Establishing a new block formatting context in the last column */ .column:last-child { float: none; overflow: hidden; }