在流中和脱离流 – CSS

流中元素的示例

以下示例包含一个标题、一个段落、一个列表和最后一个包含 strong 元素的段落。标题和段落是块级元素，strong 元素是行内元素。列表通过 flexbox 布局将项目排列成一行，它也参与了块级和行内布局——容器的外部 display 类型为 block。

html

<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>

css

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 现在已脱离流。

作为一个浮动元素，它首先按照其在正常流中的位置进行布局，然后脱离流并尽可能向左移动。

html

<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>

css

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

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

你可以看到下面段落的背景色在浮动元素下方延伸，只有该段落的行框被缩短，从而产生了内容围绕浮动元素的效果。我们段落的框仍然按照正常流的规则显示。这就是为什么，要在浮动元素周围留出空间，你必须向该元素添加外边距，以将行框推离它。你无法通过对随后的在流中的内容应用任何样式来实现这一点。

绝对定位

给一个项目 position: absolute 或 position: fixed 会将其从流中移除，并且它本应占据的任何空间也会被移除。在下一个示例中，我有三个段落元素，第二个元素具有 position: absolute，偏移值为 top: 30px 和 right: 30px。它已被从文档流中移除。

html

<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>

css

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

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

使用 position: fixed 也会将项目从流中移除，但是偏移量是基于视口而不是包含块。

当通过定位将项目脱离流时，你需要处理内容重叠的可能性。脱离流本质上意味着页面上的其他元素不再知道该元素存在，因此不会对它做出响应。

相对定位和流

如果你给一个项目 position: relative 进行相对定位，它仍然在流中。但是，你可以使用偏移值来移动它。它在正常流中本应放置的空间仍被保留，如下例所示。

html

<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>

css

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

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

当你做任何事情来移除或移动一个项目，使其偏离它在正常流中本应放置的位置时，你可能需要对内容及其周围的内容进行一些管理，以防止重叠。无论是清除浮动，还是确保具有 position: absolute 的元素不会叠加在其他内容之上。因此，应在理解其影响的情况下使用将元素从流中移除的方法。