文档流是什么？怎么脱离文档流？

Html文档流/半脱离文档流/脱离文档流

html最基本的问题就是其元素应当遵循什么原则在页面上进行布局/定位。其布局规则分为文档流（普通流）、半脱离文档流以及脱离文档流等。

在css中，我们主要通过position、float和display等方式进行干预。

文档流

文档流（普通流）是html元素默认的布局方式，元素会默认按照从左到右、从上至下的方式进行排列。元素一般分为占据一行的快级元素（block），没有自己的宽高的内联元素（inline）以及可以指定宽高的可变元素（inline-block）。

代码：

xml 复制代码

<style>
    .box-inline-block {
        display: inline-block;
        width: 100px;
        height: 100px;
        border: 1px solid red;
    }
    .box-block{
        height: 100px;
        border: 1px solid red;
    }
    .box-inline{
        display: inline;
        height: 100px;
        border: 1px solid red;
    }
</style>
<body>
    <div class="box-inline-block">box-inline-block</div>
    <div class="box-inline-block">box-inline-block</div>
    <div class="box-inline-block">box-inline-block</div>
    <div class="box-block">box-block</div>
    <div class="box-inline">box-inline</div>
</body>

效果：

半脱离文档流

浮动（float）

我们可以通过float属性，实现浮动。主要是用来实现文字环绕图片的效果。它会基于正常文档流情况下所在的位置尽量向左或者向右浮动。block元素会无视它，但是仍然会影响inline元素，由于对文档流元素仍然有影响，所以被视为半脱离文档流。

通过下面这段代码我们会发现，block元素无视了float元素，靠左。而inline元素会围绕float元素。

代码：

xml 复制代码

<style>
    .box-block{
        width: 200px;
        height: 200px;
        border: 1px solid red;
    }
    .box{
        width: 100px;
        height: 100px;
        border: 1px solid red; 
    }
    .float-left{
        float: left;
    }
</style>
<body>
    <div class="box float-left">box2</div>
    <div class="box-block">box1</div>
    <div class="box float-left">box3</div>
    <span>inlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinline
        inlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinline
        inlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinline
        inlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinline
        inlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinline
        inlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinline
        inlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinline
 inlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinlineinline
    </span>
</body>

效果：

相对定位（relative）

position: relative;会让元素相对于它在正常文档流中的位置进行定位。如果你给它添加了top, right, bottom, left属性，它将会偏移，但仍会保留在文档流中的原始空间。这意味着它并没有完全脱离文档流，只是视觉上移动了位置。

通过下面这段代码我们会发现，relative元素原来的空间仍然被占据，只是视觉上发生了变化。

代码：

xml 复制代码

<style>
    .box-relative{
        display: inline-block;
        position: relative;
        width: 100px;
        height: 100px;
        left: 20px;
        border: 1px solid red;
    }
    .box{
        display: inline-block;
        width: 100px;
        height: 100px;
        border: 1px solid red; 
    }
</style>
<body>
    <div class="box">box2</div>
    <div class="box-relative">box1</div>
    <div class="box">box3</div>
</body>

效果：

脱离文档流：

absolute（绝对定位）和fixed：

它会脱离正常的文档流（对文档流里的元素不会有任何影响），并且它的位置将相对于其最近的已定位祖先元素（对于absolute）或相对于浏览器窗口（对于fixed）进行定位。如果没有已定位的祖先元素，absolute定位的元素将相对于初始包含块（通常是HTML元素）定位。

display：none

会直接从文档流中将该元素删除，也就脱离了文档流。与之相对的visibility:hidden实现的是将元素隐藏，其占据的空间不变，所以并没有脱离文档流。

从下面的代码我们可以发现，none元素直接从页面被移除了，而hidden虽然看不见，但是其仍然占据了页面空间。

代码：

xml 复制代码

<style>
    .box{
        display: inline-block;
        width: 100px;
        height: 100px;
        border: 1px solid red; 
    }
    .none{
        display: none;
    }
    .hidden{
        visibility: hidden;
    }
</style>
<body>
    <div class="box none">box2</div>
    <div class="box hidden">box1</div>
    <div class="box">box3</div>
</body>

效果：

总结：

定位	方式
文档流	默认
半脱离文档流	float、relative
脱离文档流	absolute、fixed、none