前端学习 -- clear:both的测试

前端学习 – clear:both的测试

clear:both这个属性从字面上的理解其实就是清除所有样式，但它主要还是用来清除div框的浮动的（其他作用还没发现）。
清除div框的浮动这个概念我之前一直没理解什么意思。然后通过测试，终于明白了。下面直接上图理解。

首先代码层级结构如下：

其中div1和div2都给了float:left和宽度属性。由于没有给高度和overflow属性，文字高度就是其高度。

然后div3不加clerr:both属性时：

可以发现div3并没有在div2和div1的下方，而是排在他们的右边了。加了clear:both属性之后：

以上就是clear:both的效果。