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

Описание

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

Блочный контекст форматирования может быть создан посредством:

• корневого элемента или чего-то, что содержит его
• поплавками (элементы, у которых float не равно none)
• абсолютно позиционированными элементами (элементами, значение  position которых либо absolute, либо fixed)
• inline-blocks (элементы с display: inline-block)
• ячейки таблицы (элементы с display: table-cell, установленным по умолчанию для ячеек таблицы)
• заголовки таблицы (элементы с display: table-caption, установленным по умолчанию для заголовков таблицы)
• элементы, у которых значение свойства overflow отличается от visible
• flex блоки(элементы с display: flex или inline-flex)

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

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

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

• CSS 2.1

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

• float, clear