CSS clear: both 理解

参考

<div style="line-height: 30px;background-color: #EEEEEE;height: 100px; 50px;float: left;padding: 5px;">
  侧边栏<br>
  侧边栏
</div>
<div style=" 150px;float: left;padding: 5px; background-color: aqua;">
  <p>内容</p>
</div>
<div style="background-color: #0bbb15;color:white;text-align:center;padding:5px;">
  底部栏
</div>
<div style="background-color: blueviolet;">
  底部栏2
</div>

为底部栏设置 clear:both 

<div style="background-color: #0bbb15;color:white;text-align:center;padding:5px;clear: both;">
  底部栏
</div>

div块,默认行为是行级元素,即在容器内占一行,当div设置了float:left,产生的效果是将当前div块上浮"一层"并左对齐,之后相邻的正常div块会上移,即没有设置任何float属性的div块,并且它被上浮的块所遮罩,也就是CSS含义之一,层叠。由于div侧边块和内容块，都设置了float：left， div底部块，默认行为是上浮，并且被div侧边块和内容块遮罩(图1)，当底部栏被设置clear: both;它将不允许被遮罩，产生的效果就是下移了。