В модели визуального форматирования CSS, что означает "поток элемента"?

В CSS2 Раздел 9.3: Схемы позиционирования:

Элемент вызывается из потока, если он плавает, абсолютно позиционируется или является корневым элементом. Элемент называется in-flow, если он не выходит за пределы потока. Поток элемента A представляет собой множество, состоящее из A и всех элементов в потоке, ближайшим предка-внепотока которого является A.

Я могу понять, что из потока и в потоке означает, но я не понимаю, что означает "ближайший внепоточный предк" в последнем предложении. Может ли кто-нибудь представить простой пример?

Ответы

Ответ 1

Элемент вызывается из потока, если он плавает, абсолютно позиционируется или является корневым элементом.

Если элемент перемещается, position:absolute, position:fixed или элемент <html>, он выходит из потока.

Элемент называется in-flow, если он не выходит за пределы потока.

Self-пояснительная.

Поток элемента A представляет собой множество, состоящее из A и всех элементов в потоке, ближайшим предковым предком которого является A.

Это смешно сбивает с толку. И, кажется, нет ничего онлайн, обеспечивающих хорошее объяснение. Фактически даже рабочая группа CSS ссылается на эту фразу как "бессмысленную" .

Ответ 2

Из определения в вашем вопросе это не кажется очень сложным. В следующем примере

div {
  border: 1px solid;
  margin: 10px;
}
.out-of-flow {
  float: left;
}

<div id="1" class="in-flow">
  #1 is in-flow
  <div id="1a" class="in-flow">#1a is in-flow</div>
</div>
<div id="2" class="in-flow">
  #2 is in-flow
  <div id="2a" class="out-of-flow">#2a is out-of-flow</div>
</div>
<div id="3" class="out-of-flow">
  #3 is out-of-flow
  <div id="3a" class="in-flow">#3a is in-flow</div>
</div>
<div id="4" class="out-of-flow">
  #4 is out-of-flow
  <div id="4a" class="out-of-flow">#4a is out-of-flow</div>
</div>

Ответ 3

Источник: Я редактор спецификаций CSS.

Хотя это не указано явно в тексте, это подразумевает из определения, что только потоковые элементы (включая, чаще всего, корневой элемент) имеют поток. Поток - это все элементы, которые являются потомками элемента вне потока, кроме тех, которые "скрыты", будучи вложенными в другой элемент вне потока.

Например, в:

<html>
 <body>
  <p id=one>some in-flow text
  <div style="position: absolute;">
   <p id=two>some in-flow text
  </div>
  <p id=three>some in-flow text

Есть два элемента вне потока - элемент HTML и элемент DIV. "Поток" элемента HTML сам по себе, элемент BODY и #one и #three; если вы ходите по дереву предков для каждого из них, первым элементом вне потока, с которым они сталкиваются, является элемент HTML.

У DIV есть собственный поток, состоящий из самого себя и #two, потому что, когда вы ходите по цепочке "два предка", вы сначала попадаете в DIV, прежде чем попадете в HTML.

Грубо говоря, "поток" элемента - это совокупность вещей, которые все работают вместе в макете. Элементы вне потока (и их потомки) выкладываются в основном независимо.

Концепция на самом деле не очень полезна, но не беспокойтесь об этом.