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