文档流是浏览器按HTML顺序排列元素的默认布局方式，块级元素从上到下、行内元素从左到右排列；float、absolute、fixed等属性会使元素脱离文档流，影响布局结构；理解流有助于掌握定位与现代布局机制。
在CSS中，“流”（Flow）指的是页面元素在文档中默认的排列方式，也就是浏览器按照HTML结构顺序对元素进行布局的过程。理解“流”有助于掌握网页排版的基本逻辑，尤其是在处理定位、浮动和弹性布局时。
什么是文档流
文档流是浏览器渲染HTML元素时遵循的正常顺序。块级元素从上到下依次排列，行内元素从左到右在一行内排列，直到空间不足才换行。这种自然的排列方式就是“处于文档流中”。
大多数元素默认都处在文档流中，它们的位置由其在HTML中的顺序和盒模型属性（如margin、padding、width等）决定。
脱离文档流的情况
有些CSS属性会让元素脱离正常的文档流，从而影响其他元素的布局位置：
立即学习“前端免费学习笔记（深入）”；
- float：当元素设置为 float: left 或 float: right 时，它会脱离文档流，其他内容会围绕它排列。父容器也可能因此无法正确包裹它（需要清除浮动）。
- position: absolute：绝对定位的元素相对于最近的已定位祖先元素进行定位，并完全脱离文档流，不占据原始空间。
- position: fixed：固定定位的元素相对于视口定位，也脱离文档流，滚动页面时位置不变。
流对布局的影响
了解元素是否在流中，能帮助你预测布局行为：
- 处于文档流中的块级元素会独占一行，宽度默认撑满父容器。
- 脱离文档流的元素不会影响其他元素的排列顺序，可能导致重叠或空白。
- Flexbox 和 Grid 布局中的“流”概念有所变化，它们创建了新的格式化上下文，子元素按新规则排列，但仍可视为一种“现代流”。
基本上就这些。掌握“流”的概念，能让你更清楚为什么元素会出现在某个位置，以及如何通过CSS控制它们的行为。
