什么是文档流？
说白了就是一个“默认”状态。文档流指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。
现在有一个左中右布局
html
<div class="wrap">
<div class="float-left"></div>
<div class="center"></div>
<div class="float-right"></div>
</div>
css
.float-left{
width: 200px;
float: left;
background-color: yellow;
height: 300px;
}
.float-right{
width: 200px;
float: right;
background-color: red;
height: 300px;
}
.center{
margin: 0 200px;
background-color: blue;
height: 300px;
}
效果图
image.png
注释
中间的块级元素会默认占了整行的位置，即使给他一个宽度，他还是会占了整行的位置，块级元素就是这么霸道。
从效果看，为什么第一个不会被中间的块级元素挤下去或把中间的挤下去，这是因为左右两个是浮动元素，块级元素会无视浮动元素，然而浮动元素却不能无视块级元素，所以右边的会被挤下去
如果我们将中间的和右边的换一下位置呢？
html
<div class="wrap">
<div class="float-left"></div>
<div class="float-right"></div>
<div class="center"></div>
</div>
效果图
image.png
显然中间的蓝块无视了前面两个浮动元素
如果我们将蓝块变成行内元素或设置为display:inline-block呢？
html
<div class="wrap">
<div class="float-left"></div>
<div class="center"></div>
<div class="float-right"></div>
</div>
css
.float-left{
width: 200px;
float: left;
background-color: yellow;
height: 300px;
}
.float-right{
width: 200px;
float: right;
background-color: red;
height: 300px;
}
.center{
margin: 0 200px;
background-color: blue;
height: 300px;
width: 300px;
display: inline-block;
}
效果图
image.png
现在中间块的位置没有占满整行，所以他不会占浮动元素的位置，这时整行完全够他们用，如果将蓝块的宽度设为整行不能同时容纳他们三会怎样呢？
我们发现他们会上中下排布，这时可以将带行内属性的元素视同浮动元素对待
