CSS中clear:both的作用

原文链接：https://blog.csdn.net/liulanzaijia/article/details/87725232

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;（浮动）