清除浮動

戳這裏

看這裏

• 清除浮動的幾種方式

給浮動元素加了clear:both;該元素依舊是浮動元素，任然脫離普通流

見例子： css:

.num0,.num1{
        width: 300px;
        height:100px;
        float: left;
    }
    .num1{
        background: aqua;
        clear: both;
    }
    .num0{
        background: coral;
    }
    .num2{
        background: blueviolet;
        width: 400px;
        height: 400px;
    }

html結構：

<div class="num0"></div>
<div class="num1"></div>
<div class="num2"></div>

結果以下：

若是聲明爲左邊或右邊清除，會使元素的上外邊框邊界恰好在該邊上浮動元素的下外邊距邊界之下。

見例子：

css：

沒加clear：both：

.num0,.num1{
        width: 300px;
        height:100px;
        float: right;
    }
    .num1{
        background: aqua;
    }
    .num0{
        background: coral;
    }

結果：

給num1加clear：both；或者clear：right； 結果爲：