流內和流外
之前的指南解釋了普通流中的塊和內聯佈局。所有在流中的元素都將使用這種方法進行佈局。
以下示例包含標題、段落、列表和最後一個包含strong元素的段落。標題和段落是塊級元素，strong元素是內聯元素。列表使用 Flexbox 顯示以將專案排列成一行，但它也參與了塊和內聯佈局 - 容器具有block型別的外部display。
所有元素都可以說是位於流中。按它們在原始碼中的順序出現在頁面上。
將專案移出流
除了以下元素，所有元素都位於流中：
- 浮動專案
- 具有
position: absolute的專案（包括以相同方式工作的position: fixed） - 根元素（
html）
在流外專案建立新的塊格式化上下文 (BFC)，因此它們內部的所有內容都可以被視為一個迷你佈局，與頁面的其他部分分離。因此，根元素位於流外，作為我們文件中所有內容的容器，併為文件建立塊格式化上下文。
浮動專案
在此示例中，有一個div和兩個段落。已將背景顏色新增到段落，並且div已左浮動。div現在位於流外。
作為浮動元素，它首先根據它在普通流中的位置進行佈局，然後從流中移除並儘可能地向左移動。
您可以看到以下段落的背景顏色在它下方執行，只有該段落的行框縮短了，以產生內容環繞浮動元素的效果。我們段落的盒子仍然根據普通流的規則顯示。這就是為什麼為了在浮動元素周圍留出空間，您必須在該元素上新增邊距，以便將行框從它推開。您不能對以下位於流中的內容應用任何內容來實現這一點。
絕對定位
為專案設定position: absolute或position: fixed會將其從流中移除，並且它本來佔用的任何空間都將被移除。在下一個示例中，我有三個段落元素，第二個元素具有position: absolute，偏移值為top: 30px和right: 30px。它已從文件流中移除。
使用position: fixed也會將專案從流中移除，但是偏移值基於視窗而不是包含塊。
當使用定位將專案從流中移除時，您需要管理內容重疊的可能性。流外本質上意味著頁面上的其他元素不再知道該元素的存在，因此不會對其做出反應。
相對定位和流
如果使用position: relative為專案設定相對定位，它將保留在流中。但是，您可以使用偏移值將其推開。但是，它在普通流中佔據的空間將被保留，如以下示例所示。
當您對專案進行任何操作以從其在普通流中的位置移除或移動它時，您可能會需要管理內容及其周圍的內容，以防止重疊。這包括清除浮動，或確保具有position: absolute的元素不會覆蓋其他內容。由於這個原因，應該瞭解將元素從位於流中移除的方法所產生的影響。
總結
另請參閱
- CSS 佈局學習區中的定位