在流中和脫離流 – 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 的元素不會疊加在其他內容之上。因此，應在理解其影響的情況下使用將元素從流中移除的方法。