CSS 文档流 - 绿叶网

在学习浮动布局和定位布局之前，我们先来了解 “正常文档流” 和 “脱离文档流”。深入了解这两个概念，是学习浮动布局和定位布局的理论前提。

CSS 正常文档流

什么叫 “文档流”？简单来说，就是指元素在页面中出现的先后顺序。那什么叫 “正常文档流” 呢？

正常文档流，又称为 “普通文档流” 或 “普通流”，也就是 W3C 标准所说的 “normal flow”。我们先来看一下正常文档流的简单定义：“正常文档流，将一个页面从上到下分为一行一行，其中块元素独占一行，相邻行内元素在每一行中按照从左到右排列直到该行排满。” 也就是说，正常文档流指的就是默认情况下页面元素的布局情况。

我们来总结一下，主要有以下 2 点。

元素在正常文档流中，遵循从上到下，从左到右的排列方式。
块级元素独占一行，行内元素在一行内依次排列，直到该行排满。

示例 1：CSS 文档流

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div></div>
    <span></span><span></span>
    <p></p>
    <span></span><i></i>
    <img>
    <hr>
</body>
</html>

上面 HTML 代码的正常文档流如下图所示。

CSS 正常文档流

CSS 正常文档流分析

分析：

由于 div、p、hr 都是块元素，因此独占一行。而 span、i、img 都是行内元素，因此如果两个行内元素相邻，就会位于同一行，并且从左到右排列。

CSS 脱离文档流

在 CSS 中，脱离文档流指的是脱离正常文档流。正常文档流就是我们没有使用浮动或者定位去改变的默认情况下的 HTML 文档结构。换一句话说，如果我们想要改变正常文档流，常见的有 2 种方法：

CSS 浮动。
CSS 定位。

示例 2：CSS 脱离文档流

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        /* 定义父元素样式 */
        #father {
            width: 300px;
            background-color: #0C6A9D;
            border: 1px solid silver;
        }
        /* 定义子元素样式 */
        #father div {
            padding: 10px;
            margin: 15px;
            border: 2px dashed red;
            background-color: #FCD568;
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="son1">box1</div>
        <div id="son2">box2</div>
        <div id="son3">box3</div>
    </div>
</body>
</html>