Как блок-контейнер может одновременно устанавливать и блочный, и встроенный контексты форматирования? - PullRequest
Новая
       51

Как блок-контейнер может одновременно устанавливать и блочный, и встроенный контексты форматирования?

5 голосов
/ 21 мая 2019

Из модуля отображения CSS уровня 3 спецификации есть примечание о block container, которое гласит:

Примечание: блок контейнера блока может устанавливать контекст форматирования блокаи контекст встроенного форматирования одновременно.

Как это возможно концептуально?

А как тогда раскладываются детские ящики?Например, если в контейнере блока есть блоки как на уровне строк, так и на уровне блоков, какой контекст форматирования используется в этом случае?Используются ли оба контекста форматирования одновременно или один из них "выигрывает", а другой откладывается?

1 Ответ

1 голос
/ 22 мая 2019

Это вполне возможно и даже необходимо для определенных правил CSS. Самый простой способ понять это на примере такой коробки. 

<div style="overflow:auto">hello world</div>

Здесь у нас есть элемент с display:block (по умолчанию для элементов div) и overflow:auto. Это один из способов, которым визуализированный блок элемента устанавливает контекст форматирования блока. Это влияет, например, на то, как расположение и размеры ящика зависят от наличия поплавков.

Сравните эти два примера: 

.formatting.contexts {
  overflow:visible;
}

.container {
  width:70px;
}

img {
  float:left;
  margin-right:3px;
}
<div class="container">
  <img src="http://placehold.it/16" alt="placeholder grey square less than one line in height">
  <div class="formatting contexts">hello world</div>
</div>

.formatting.contexts {
  overflow:auto;
}

.container {
  width:70px;
}

img {
  float:left;
  margin-right:3px;
}
<div class="container">
  <img src="http://placehold.it/16" alt="placeholder grey square less than one line in height">
  <div class="formatting contexts">hello world</div>
</div>

В первом примере текст оборачивается под изображением. Это потому, что div с классом «контексты форматирования» имеет overflow:visible, поэтому он не формирует контекст форматирования блока.

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

Во втором примере текст не оборачивается под изображением. Это потому, что div с классом «контексты форматирования» теперь имеет overflow:auto, что означает, что он устанавливает контекст форматирования блока, и это блок блока, который сокращается, чтобы избежать его перекрытия с плавающей точкой. Но его содержимое точно такое же, только встроенные блоки, поэтому также устанавливает контекст встроенного форматирования.

...