至今也没有找到一个关于文档流的标准概念，所以这里所阐述的文档流的概念只是本人的理解
可以把文档流拆分成“文档”和“流”两个词汇来理解。
“文档”指的是内容，也就是我们所写的页面内容，而“流”则是一种文档内容的显示规则。
有些元素天生不占据文档流，比如隐藏元素。
也可以使一个元素强行脱离文档流，比如让元素浮动（float）起来或者使用绝对定位（absolute、fixed）等方式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.a1 {
float:left;
width:150px;
height:150px;
background-color:green;
}
.a2 {
width:200px;
height:200px;
background-color:red;
}
</style>
</head>
<body>
<div class="a1">a1</div>
<div class="a2">a2</div>
</body>
</html>
a1元素脱离了文档流，那么它原来的位置将会被它后面的文档流中的元素所占据。
最后总结:
可以把文档流形象的比喻为马路上的车流。假设有些车太宽了只能够占据一行，那就是块级元素，有的车比较瘦小，可以并排行驶就是内联元素。在这些车流中可能有超级富二代，他们的车可能是空路两用的，可以飞起来，这些车起飞之后在马路上空飞行就相当于元素脱离了文档流，其他车辆可以填补起飞车辆的位置。