流内和流外
之前的指南解释了普通流中的块和内联布局。所有在流中的元素都将使用这种方法进行布局。
以下示例包含标题、段落、列表和最后一个包含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 布局学习区中的定位