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

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Описание

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

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

  • корневой элемент или что-то, что содержит его
  • плавающие элементы (элементы, у которых float не равно none)
  • абсолютно позиционированные элементы (элементы, значение  position которых либо absolute, либо fixed)
  • «строчные блоки» (элементы с display: inline-block)
  • ячейки таблицы (элементы с display: table-cell, являющимся значением по умолчанию для ячеек таблицы в HTML)
  • заголовки таблицы (элементы с display: table-caption, являющимся значением по умолчанию для заголовков таблицы в HTML)
  • анонимные ячейки таблицы, неявно создаваемые элементами с display: tabletable-rowtable-row-grouptable-header-grouptable-footer-group (значения по умолчанию для таблиц, строк таблиц, «шапок», «подвалов» и тел таблиц в HTML соответственно) либо inline-table
  • элементы, у которых значение свойства overflow отличается от visible
  • displayflow-root
  • элементы с contain: layoutcontent или strict
  • флекс-элементы (непосредственные потомки элемента с display: flex или inline-flex)
  • грид-элементы (непосредственные потомки элемента с display: grid или inline-grid)
  • многоколоночные контейнеры (элементы, у которых column-count или column-width  не равно auto, включая элементы с column-count: 1)
  • column-span: all должно всегда создавать блочный контекст форматирования, даже если элемент с column-span: all не находится в многоголоночном контейнере (изменение в спецификации, баг Chrome).

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

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

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

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

Метки документа и участники

Внесли вклад в эту страницу: SelenIT, gamexxx, I-O, ViT09, akhabibullina
Обновлялась последний раз: SelenIT,