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;(浮动)