前端学习 – clear:both的测试
clear:both这个属性从字面上的理解其实就是清除所有样式,但它主要还是用来清除div框的浮动的(其他作用还没发现)。
清除div框的浮动这个概念我之前一直没理解什么意思。然后通过测试,终于明白了。下面直接上图理解。
首先代码层级结构如下:
其中div1和div2都给了float:left和宽度属性。由于没有给高度和overflow属性,文字高度就是其高度。
然后div3不加clerr:both属性时:
可以发现div3并没有在div2和div1的下方,而是排在他们的右边了。加了clear:both属性之后:
以上就是clear:both的效果。