块级元素的浮动与清除

Float浮动

首先要知道,div是一种块级元素,在标准流中,块级元素是自上而下排列并且新占一行的,所以我们可以看到在这里不论div的宽度设置为多小都会新开一行排列.

在实际的页面编写过程中很多时候需要在一行显示多个块级元素,这时候我们可以设定float属性来让一个块级元素脱离标准流从而让其不在单独占一行

这里我们绿色div设定float:left让他左浮动,可以看到第二行现在有两个色块,并且本来200px的蓝色div只显示了一般,这是因为绿色div浮动脱离了标准流,他的显示位置虽然不变,但是已经不在标准流中影响布局
此时红色div和蓝色div重新组成了新的标准流按照块级元素的标准排列,而浮动的元素"浮"在了标准流上,将蓝色div遮挡了一半

这里我们对红色和绿色都设置了左浮,可以看到,红色和绿色div都脱离了标准流,而蓝色div单独成了新的标准流.
红色和绿色现在在同一流上组成了新流.

这里我们先去除红色的浮动,并增加黄色300px的浮动div
可以看到,虽然黄色设置了左浮,但是并没有和一样设置了左浮的绿色一起重新组成新流,这是为什么呢?如代码所示,代码的顺序是绿→蓝→黄
因为蓝色并没有设置浮动,黄色虽然设置了浮动,但是因为黄色在原本流中的位置就是蓝色的下方,设置浮动后其显示位置依然在这

    <div style="width: 50px;background-color: red;">
        <p style="font-size:10px">50px</p>
    </div>
    <div style="width: 100px;background-color: green;float: left;z-index: -1;">
        <p style="font-size: 10px;">100px并设置左浮动</p>
    </div>
    <div style="width: 200px;background-color: blue;">
        <p>200px</p>
    </div>
    <div style="width: 300px;background-color: yellow;float: left;">
        <p>300px并设置左浮</p>
    </div>

清除浮动

语法:
clear:left|right|none|both
通过设置clear属性可以去除该div一侧的浮动

这里我们将两个div都设置为左浮,此时他们在同一流并且在一行排列,但是如果我们还想让绿色处于红色下面怎么办呢?
值得注意的是
css的设置只会改变选择元素的显示,所以为了改变绿色的位置,我们要对绿色div设置clear:left此时对于绿色来说,红色并不被他视为浮动,这样绿色将会按照视红色为标准流时进行布局,放在红色下面

这里我们增加一个不设置浮动的300px蓝色div,可以看出清除浮动是只对选择的元素启用的,蓝色div还是将红色和绿色都视为浮动,红色和绿色依然不影响标准流的布局