文档流（Document Flow），也称为正常流（Normal Flow），是指浏览器解析HTML文档时默认的布局方式。在文档流中，元素按照它们在HTML代码中的顺序从上到下、从左到右排列，并且每个元素占据一定的空间。这种布局方式是Web页面最基本的布局机制，确保了内容以一种可预测和一致的方式呈现给用户。
HTML元素的排列顺序
在文档流中，元素按照它们在HTML代码中的顺序从上到下、从左到右排列，并且每个元素占据一定的空间。
文档流的特点
块级元素：
块级元素（如<div>, <p>, <h1>等）通常占据整个可用宽度，并且会在新的一行开始。一个块级元素之后的其他元素会出现在它的下方，除非通过CSS改变其行为。
内联元素：
内联元素（如<span>, <a>, <img>等）不会强制换行，它们会根据文本的方向和其他内联元素一起排列。内联元素只占据必要的宽度，不会扩展到整个容器宽度。
自动高度计算：
在文档流中，父元素的高度通常是根据其子元素的内容自动计算得出的。如果子元素没有明确的高度设置，父元素会根据子元素的实际高度来调整自己的高度。
默认定位：
默认情况下，所有元素都处于静态定位（position: static;），这意味着它们的位置完全由文档流决定。静态定位的元素无法通过top, bottom, left, right属性来改变位置。
文本环绕：
当遇到浮动元素时，文本和其他内联元素会自然地围绕浮动元素进行布局。这种特性使得浮动元素非常适合用于图文混排。
脱离文档流的情况
当某些CSS属性被应用时，元素可能会脱离正常的文档流，这意味着它们不再遵循上述规则。常见的脱离文档流的方法包括：
- 浮动（
float）：使元素向左或向右移动，直到遇到容器边缘或其他浮动元素。浮动元素会影响周围元素的布局，但不占用原来的空间。 - 绝对定位（
position: absolute;）：元素相对于最近的非static定位祖先元素定位；如果没有这样的祖先，则相对于初始包含块（通常是视口）。绝对定位的元素完全从文档流中移出，不影响其他元素的布局。 - 固定定位（
position: fixed;）：与绝对定位类似，但它是相对于浏览器窗口定位的。固定定位的元素同样脱离文档流，保持固定位置，即使用户滚动页面也不改变。 - 粘性定位（
position: sticky;）：结合了相对定位和固定定位的特点。在达到指定阈值之前，元素表现为相对定位；一旦达到阈值，就表现为固定定位。粘性定位的元素保留其在文档流中的原始空间。
文档流的重要性
理解文档流对于掌握网页布局至关重要。许多复杂的布局技术都是基于对文档流的理解以及如何有效地控制和操作它。例如，使用浮动、定位、Flexbox和Grid布局等方法来创建响应式设计、多列布局以及其他高级布局效果。此外，正确处理脱离文档流的元素可以帮助解决诸如父元素高度塌陷等问题，确保页面布局的一致性和可靠性。