clear:both意思就是清除浮动，例如我们设置了三个div如下：
<div style="line-height: 30px;background-color: #EEEEEE;height: 100px;width: 50px;float: left;padding: 5px;">侧边栏<br>侧边栏
</div>
<div style="width: 150px;float: left;padding: 5px;"><p>内容</p>
</div>
<div style="background-color: #0bbb15;color:white;text-align:center;padding:5px;">底部栏</div>我们希望最后一个“底部拦”的div可以位于最底下，但是这样写运行发现底部拦位于上方了：
这时候我们在底部栏的div上加入clear:both;：
<div style="background-color: #0bbb15;color:white;clear:both;text-align:center;padding:5px;">底部栏</div>运行发现，底部栏div成功位于底部了：
这是因为使用clear:both;清除了前面两个div设置的float: left;（浮动）
