В потоке и вне потока

Следующий пример содержит заголовок, абзац, список и заключительный абзац, который содержит элемент strong. Заголовок и абзацы имеют блочный уровень, элемент strong - инлайновый. Список, который отображается с помощью flexbox для выравнивания элементов в строку, также участвует в блочном и инлайновом форматировании - контейнер имеет внешний display тип block.

<div class="box">
  <h1>A heading</h1>
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney.
  </p>

  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
  <p>
    Their names were <strong>Stephen and Joseph Montgolfier</strong>, they were
    papermakers by trade, and were noted as possessing thoughtful minds and a
    deep interest in all scientific knowledge and new discovery.
  </p>
</div>

body {
  font: 1.2em sans-serif;
}
.box > * {
  border: 1px solid green;
}

ul {
  display: flex;
  justify-content: space-around;
  list-style: none;
  margin: 0;
}

Все элементы считаются "в потоке"; они появляются на странице в том порядке, в котором они указаны в исходном коде.

Все элементы находятся в потоке, за исключением:

• элементов с плавающим позиционированием
• элементов с position: absolute (включая position: fixed, который ведет себя аналогичным образом)
• корневого элемента (html)

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

В этом примере есть div, а затем два абзаца. К абзацам добавлен цвет фона, и div с плавающим позиционированием слева. div теперь находится вне потока.

Как элемент с плавающим позиционированием, он сначала размещается в соответствии с тем, где он должен быть в нормальном потоке, затем выводится из потока и перемещается влево как можно дальше.

<div class="box">
  <div class="float">I am a floated box!</div>
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney. Their names
    were Stephen and Joseph Montgolfier, they were papermakers by trade, and
    were noted as possessing thoughtful minds and a deep interest in all
    scientific knowledge and new discovery.
  </p>
  <p>
    Before that night—a memorable night, as it was to prove—hundreds of millions
    of people had watched the rising smoke-wreaths of their fires without
    drawing any special inspiration from the fact.
  </p>
</div>

body {
  font: 1.2em sans-serif;
}
p {
  background-color: #ccc;
}

.float {
  float: left;
  font-weight: bold;
  width: 200px;
  border: 2px dotted black;
  padding: 10px;
}

Вы можете видеть цвет фона следующего абзаца, который расположен под ним, — это только линейные блоки этого абзаца, которые были укорочены для обеспечения обтекания содержимого вокруг элемента с плавающим позиционированием. Блок нашего абзаца по-прежнему отображается в соответствии с правилами нормального потока. Именно поэтому, чтобы создать отступ вокруг элемента с плавающим позиционированием, необходимо добавить отступ к этому элементу, чтобы отодвинуть линейные блоки от него. Ничего нельзя применить к последующему содержимому в потоке для достижения этой цели.

Присвоение элементу position: absolute или position: fixed выводит его из потока, и любое занимаемое им пространство удаляется. В следующем примере у меня есть три элемента абзаца, второй элемент имеет position: absolute, со значениями смещения top: 30px и right: 30px. Он был удален из потока документа.

<div class="box">
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney.
  </p>
  <p class="abspos">
    Their names were Stephen and Joseph Montgolfier, they were papermakers by
    trade, and were noted as possessing thoughtful minds and a deep interest in
    all scientific knowledge and new discovery.
  </p>
  <p>
    Before that night—a memorable night, as it was to prove—hundreds of millions
    of people had watched the rising smoke-wreaths of their fires without
    drawing any special inspiration from the fact.
  </p>
</div>

body {
  font: 1.2em sans-serif;
}
.box {
  width: 70%;
}
p {
  border: 2px solid green;
}

.abspos {
  position: absolute;
  background-color: green;
  color: #fff;
  top: 30px;
  right: 30px;
  width: 400px;
}

Использование position: fixed также выводит элемент из потока, но смещения основаны на области просмотра, а не на блоке-контейнере.

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

Если вы присвоите элементу относительное позиционирование с position: relative, он останется в потоке. Однако вы можете использовать значения смещения, чтобы переместить его. Пространство, которое он занимал бы в нормальном потоке, сохраняется, как вы можете видеть в примере ниже.

<div class="box">
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney.
  </p>
  <p class="relative">
    Their names were Stephen and Joseph Montgolfier, they were papermakers by
    trade, and were noted as possessing thoughtful minds and a deep interest in
    all scientific knowledge and new discovery.
  </p>
  <p>
    Before that night—a memorable night, as it was to prove—hundreds of millions
    of people had watched the rising smoke-wreaths of their fires without
    drawing any special inspiration from the fact.
  </p>
</div>

body {
  font: 1.2em sans-serif;
}
.box {
  width: 70%;
}
p {
  border: 2px solid green;
}

.relative {
  position: relative;
  background-color: green;
  color: #fff;
  bottom: 50px;
  left: 50px;
  width: 400px;
}

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

В этом руководстве мы рассмотрели способы удаления элемента из потока для достижения некоторых очень специфических типов позиционирования. В следующем руководстве мы рассмотрим связанную проблему, заключающуюся в создании блочного контекста форматирования, в Разъяснение контекстов форматирования.

• Позиционирование в разделе CSS Layout learn area