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

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

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

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

3 3
css w3c language-lawyer

3 ответа:

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

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

Элемент называется in-flow, если он не является out-of-flow.

Само собой разумеется.

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

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

4

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

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>

  • Поток элемента №1 - это только он сам. Он имеет дочерний элемент in-flow, но поскольку #1 не является out-of-flow, он не может быть ближайшим out-flow предком #1a.

  • Поток элемента №2 - это только он сам. У него нет потокового потомка, и даже если бы он был, № 2 не является вне-потоковым.

  • Поток самого элемент №3 - это он сам и №3А, потому что № 3а-это входящий поток, а его ближайший предок-выходящий из потока-это № 3.

  • Поток элемента №4 - это только он сам. У него нет потокового потомка.

5

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

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

Например, в:

<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

Существует два элемента out-of-flow-HTML элемент и элемент div. "Поток" HTML-элемента-это он сам, элемент BODY и #one и #three; если вы пройдете по древу предков для каждого из них, первый элемент out-of-flow, с которым они сталкиваются, - это HTML-элемент.

DIV имеет свой собственный поток, состоящий из самого себя и #two, потому что когда вы идете по цепочке предков #two, вы сначала попадаете в DIV, прежде чем попасть в HTML. Грубо говоря, "поток" элемента - это набор вещей, которые все работают вместе в макете. Элементы вне потока (и их потомки) выкладываются в основном самостоятельно. Эта концепция на самом деле не очень полезна, Тхо - не беспокойтесь об этом.
3