文档流

将窗体自上而下分成一行一行，并在每行中按从左至右依次排放元素，称为文档流，也称为普通流。
这个应该不难理解，HTML中全部元素都是盒模型，盒模型占用一定的空间，依次排放在HTML中，形成了文档流。

CSS浮动

元素的浮动是指设置了浮动属性的元素会脱离标准流的控制，移动到其父元素中指定位置的过程。如果元素设置了浮动，会使元素向左或向右移动，也就是说元素只能水平方向浮动，不能上下浮动，而元素设置了浮动后，周围的元素也会重新排列。一个浮动的元素会尽量向左或向右移动，直到它的外边缘碰到包含边框或另一个浮动框的边框为止。需要注意的是：浮动元素之前的元素不会受到影响，而浮动元素之后的元素会围绕它。
详细查看Ref#2

脱离文档流的三种方式

float
position: absolute;
position: fixed;

float脱离文档流

使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在该元素的周围。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .first {
            width: 200px;
            height: 200px;
            border: 3px solid red;
            float: left;
        }
        .second {
            width: 200px;
            height: 100px;
            border: 3px solid blue;
        }
    </style>
</head>
 
<body>
 
<div class="first">123</div>
<div class="second">456</div>
 
</body>
</html>

运行效果：

float浮动.png

这段代码中把红色的框设置为了左浮，所以红色的框称为了浮动状态（浮动在蓝色框的上面），而蓝色框占用了原来空色框的位置。
注意到，蓝色框中的文本依然认为红色框存在，所以为红色框让出了位置。
由于div是块状元素，所以456出现在下方。

position: absolute;脱离文档流

absolute称为绝对定位，but应该称为相对定位，因为使用absolute脱离文档流后的元素，是相对于该元素的父类（及以上，如果直系父类元素不满足条件则继续向上查询）元素进行定位的，并且这个父类元素的position必须是非static定位的（static是默认定位方式）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .first {
            width: 200px;
            height: 200px;
            border: 3px solid red;
        }
        .second {
            width: 200px;
            height: 100px;
            border: 3px solid blue;
            position: absolute;
        }
        .third {
            width: 200px;
            height: 200px;
            border: 3px solid green;
        }
    </style>
</head>
 
<body>
 
<div class="first">123</div>
<div class="second">456</div>
<div class="third">789</div>
 
</body>
</html>

运行效果：

position: absolute;脱离文档流

通过把蓝色的框的position设置为absolute使蓝色的框变为浮动状态，可以看到绿色的框被蓝色的框遮挡。
emmm...，看起来貌似没有问题，但是还记得前面说的absolute是相对谁定位的吗？
相对非static元素的父级定位的，这里蓝框的父级就是html，所以应该是相对于html定位，
但是代码中没有提供相对位置，所以只能浮动在原来该元素在文档流中的位置上方。

position: fixed; 脱离文档流

完全脱离文档流，相对于浏览器窗口进行定位。（相对于浏览器窗口就是相对于html）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .first {
            width: 200px;
            height: 200px;
            border: 3px solid red;
        }
        .second {
            width: 200px;
            height: 100px;
            border: 3px solid blue;
            position: fixed;
            right: 0;
            top: 0;
        }
        .third {
            width: 200px;
            height: 200px;
            border: 3px solid green;
        }
        html {
            border: dotted;
        }
    </style>
</head>
 
<body>
 
<div class="first">123</div>
<div class="second">456</div>
<div class="third">789</div>
 
</body>
</html>

运行效果：