文档流对浮动的影响

什么是文档流？

说白了就是一个“默认”状态。文档流指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

现在有一个左中右布局

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

现在中间块的位置没有占满整行，所以他不会占浮动元素的位置，这时整行完全够他们用，如果将蓝块的宽度设为整行不能同时容纳他们三会怎样呢？
我们发现他们会上中下排布，这时可以将带行内属性的元素视同浮动元素对待

作者：雨未浓
链接：https://www.jianshu.com/p/a359988859a5