清除浮动

戳这里

看这里

• 清除浮动的几种方式

给浮动元素加了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； 结果为：