文档流（Normal Flow）是浏览器在没有任何CSS干预的情况下，对页面元素进行排列的默认规则。理解文档流，是掌握CSS布局的第一步，因为它决定了元素默认情况下的位置、尺寸以及相互之间的排列关系。文档流最核心的两种特性体现在块级元素和行内元素身上：块级元素从上到下垂直排列，每个元素独占一行；行内元素则从左到右水平排列，超出宽度后自动换行。本文将围绕这两种特性展开详细分析。
一、文档流的基本概念与渲染规则
所谓文档流，指的是元素在页面中默认的排布流向。浏览器渲染页面时，会按照HTML代码中元素出现的顺序，将元素一个个放到页面上，就像水流一样依次填充空间。这个过程中，浏览器遵循两条基本规则：块级盒子按垂直方向堆叠，行内盒子按水平方向流动。
需要注意的是，文档流并不是某种CSS属性，而是一种默认的排版机制。所有的布局属性，比如float、position、flex等，本质上都是在改变或脱离这套默认机制。如果不去理解文档流，直接学习各种布局技巧，很容易遇到元素位置不符合预期却找不到原因的情况。例如一个设置了宽度的span不生效，或者两个div之间出现莫名间隙，这些问题的根源都在于文档流的特性。
二、块级元素的特性详解
块级元素是文档流中最常见的元素类型，典型的代表有div、p、h1到h6、ul、li等。它的核心特性可以总结为以下几点。
第一，块级元素独占一行，无论宽度是多少，后续的块级元素都会被排到下一行。第二，块级元素默认宽度为父元素的100%，也就是自动撑满可用宽度。第三，块级元素可以正常设置width、height、margin和padding，四个方向的外边距和内边距都会生效。看一个简单的例子：
<div class="box1">第一个块级元素</div>
<div class="box2">第二个块级元素</div>
<style>
.box1 {
width: 200px;
height: 50px;
background-color: lightblue;
margin: 20px; /* 四个方向的外边距都生效 */
}
.box2 {
background-color: lightcoral;
/* 不设置宽度时，默认占满父元素整行 */
}
</style>
上面的代码中，即使box1只设置了200像素的宽度，box2依然会被排到下一行，这就是块级元素独占一行的体现。而box2没有设置宽度，它默认填满了父容器的整个宽度。此外，相邻块级元素的垂直margin会出现合并现象，也就是外边距塌陷，取两者中较大的值作为最终间距，这一点在排查间距问题时经常遇到。
三、行内元素的特性详解
行内元素包括span、a、strong、em、img等（严格来说img是行内替换元素，这里暂且归为一类讨论）。它与块级元素的差异非常明显。
首先，行内元素不会独占一行，多个行内元素会在同一行内水平排列，排满后自动换行。其次，行内元素设置width和height无效，它的宽高由内容撑开。再次，行内元素的水平方向margin和padding生效，但垂直方向不生效，这也是新手最容易踩的坑之一。通过代码对比可以直观看到差异：
<span class="inline-box">行内元素一</span>
<span class="inline-box">行内元素二</span>
<style>
.inline-box {
width: 300px; /* 设置了也不生效 */
height: 100px; /* 设置了也不生效 */
background-color: lightgoldenrodyellow;
margin-top: 50px; /* 垂直方向外边距不生效 */
padding: 20px; /* 垂直padding虽然撑开背景，但不影响布局 */
}
</style>
从渲染结果可以看到，两个span排在同一行，宽高设置完全没有效果。垂直方向的margin被浏览器忽略，padding虽然会让背景区域变大，但不会把周围的行内内容推开，因此可能和上下行的内容发生视觉重叠。另外，行内元素之间存在默认间隙，这是因为HTML代码中的换行和空格被解析为一个空白字符，解决办法包括把标签写在一行、设置父元素font-size为0等。
四、display属性与元素类型转换
块级和行内并不是元素固定不变的属性，通过display属性可以随时转换元素的类型。常用的取值有三种：display:block让行内元素表现为块级，display:inline则相反，display:inline-block则是两者的结合体，既能与其他行内元素排在同一行，又能设置宽高和垂直方向的margin、padding。
span {
display: inline-block;
width: 150px; /* 生效 */
height: 40px; /* 生效 */
margin: 10px; /* 四个方向都生效 */
}
div {
display: inline; /* 转为行内后，宽高设置全部失效 */
}
inline-block在实际开发中应用广泛，比如制作横向导航菜单、按钮组等场景。它的缺点是同样会受到行内元素空白间隙问题的影响，需要注意处理HTML中的换行符。现代开发中，更多布局场景已经由flex和grid接管，但理解inline-block的原理依然有助于阅读老项目和排查兼容性问题。
五、脱离文档流的常见场景
文档流是默认规则，但很多布局需求需要元素跳出这套规则，这就是脱离文档流。常见的方式有两种：float浮动和absolute、fixed定位。
当元素设置了float:left或float:right后，它会脱离文档流，向左或向右移动直到碰到父容器边缘或其他浮动元素。后续的块级元素会当它不存在一样继续排列，这也是浮动导致父元素高度塌陷的原因。而position:absolute和position:fixed会让元素完全脱离文档流，相对于最近的定位祖先元素或浏览器视口进行定位，原位置不再保留空间。相比之下，position:relative虽然叫相对定位，但元素仍然占据文档流中的原始位置，只是视觉上发生偏移，这一点经常被混淆。
理解脱离文档流的机制，就能明白为什么清除浮动要使用clear属性或伪元素方案，也能明白绝对定位的元素为什么不会撑开父容器。这些布局问题的答案，最终都能追溯到文档流的两种基本特性上。
总结
css文档流的两种特性，本质上是浏览器对块级元素和行内元素的不同排版策略。块级元素独占一行、可设宽高、垂直堆叠；行内元素水平排列、宽高由内容决定、垂直方向的margin和padding受限。掌握这些差异，再结合display属性的类型转换和脱离文档流的几种方式，就能对页面布局形成完整的认知体系，遇到元素位置异常时也能快速定位原因。