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

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

Описание

Блочный контекст форматирования — часть механизма отображения веб-страницы в 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) . Правила размещения плавающих элементов и сброса обтекания применяются только к элементам внутри одного и того же блочного контекста форматирования. Плавающие элементы не влияют на размещение содержимого внутри других блочных контекстов форматирования, и отмена обтекания распространяется только на плавающие элементы из того же самого контекста форматирования. Схлопывание внешних отступов тоже происходит только между блоками из одного и того же блочного контекста форматирования.

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

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

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

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

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

 

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

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

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

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