Что есть под капотом в display: table запрещающее обтекание?

Подробный разбор механизмов display: table и его влияния на обтекание

Когда мы применяем к элементу CSS-свойство display: table, этот элемент начинает вести себя как HTML-элемент <table> на уровне блочной модели и взаимодействия с другими элементами. Что происходит "под капотом", что автоматически предотвращает обтекание (например, float или clear)? Давайте разберем по частям.

Ключевые механизмы, запрещающие обтекание

1. Создание нового контекста форматирования (Formatting Context)

Самое важное — элемент с display: table создает блочный контекст форматирования (Block Formatting Context, BFC). Согласно спецификации CSS, табличные элементы (включая table, inline-table, table-cell и др.) генерируют блоки, которые участвуют в BFC.

Свойства BFC, которые непосредственно влияют на обтекание:

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

.container {
  display: table; /* Создает BFC */
  width: 100%;
}
/* Плавающий элемент НЕ сможет обтекать .container снаружи */
.float-left {
  float: left;
  width: 200px;
}

2. Основополагающее правило для таблиц в CSS

Спецификация CSS явно определяет поведение табличных боксов (table wrapper box и table grid box). Ключевой момент:

"The table wrapper box is a block-level box that contains the table box itself and any caption boxes. The table wrapper box establishes a block formatting context."

Это означает, что внешняя обертка таблицы (которая и создается при display: table) является блочным контейнером и устанавливает BFC. Блочные контейнеры, по определению, занимают всю доступную ширину родителя (если не задана иная ширина), располагаются друг под другом в нормальном потоке документа и не позволяют соседним элементам обтекать себя по бокам.

3. Неявное поведение width и box-sizing

Элемент с display: table ведет себя как блочный бокс в плане расчета ширины. Его ширина по умолчанию — auto, что означает растяжение на всю доступную ширину контейнера, исключая области, занятые плавающими элементами. Однако, так как сам элемент теперь создает BFC, он больше не взаимодействует с внешними плавающими элементами для расчета своей позиции. Он просто занимает всю ширину своей области размещения, эффективно "выталкивая" потенциальные обтекающие элементы вверх или вниз.

<div class="float-left">Я слева</div>
<div class="table-element">Я display: table</div>

.float-left {
  float: left;
  width: 150px;
  height: 100px;
  background: lightblue;
}
.table-element {
  display: table;
  height: 200px;
  background: lightcoral;
  /* Этот блок НЕ обтечет синий блок, а начнется с новой строки,
     растянувшись на всю оставшуюся ширину (100% - 150px, но в новой строке). */
}

4. Сравнение с display: block

Интересно, что display: block также создает BFC не всегда, а только при определенных условиях (например, overflow: hidden, float, position: absolute). В то время как display: table всегда создает BFC по определению своей природы в спецификации. Это делает его одним из старых хаков для создания BFC до появления более семантичных свойств.

Почему обтекание невозможно: итог

• Блочность и BFC: Элемент становится блочным контейнером с независимым контекстом форматирования.
• Полная ширина: Он стремится занять всю доступную ширину строки (в нормальном потоке), оставляя место только для предшествующих плавающих элементов в той же строке, но сам, будучи блочным, начинает новую строку.
• Изоляция: Внутренние элементы (display: table-cell, table-row) изолированы в своем табличном контексте, а внешнее обтекание к ним не применяется.

Практический вывод: Использовать display: table специально для запрета обтекания — не семантично, если вы не строите реальную табличную структуру. Для этой цели лучше подходят явные методы создания BFC:

.clear-float {
  overflow: hidden; /* или overflow: auto */
  /* Или display: flow-root (наиболее семантичный современный способ) */
}

Свойство display: flow-root было введено именно как понятный и предсказуемый способ создания BFC без побочных эффектов табличной или блочной модели с overflow.