1.為何要清除浮動

下面看一個非常簡單的實例，為方便

.box {
     background-color:#0000FF;
 }
.float-box {
     width:200px;
     height:200px;
     background-color:#FF0000;
 }
<div class="box">
    <div class="float-box"></div>
</div>

效果如下圖，藍色父類的高度隨著子元素高度變化而變化

clearfix1.jpg

當(dāng)在子元素上添加float后如下圖

.float-box {
        width:200px;
        height:200px;
        background-color:#FF0000;
        float:left;    /* 添加浮動 */
    }

.box {
    background-color:#0000FF;
}
.float-box {
    width:200px;
    height:200px;
    background-color:#FF0000;
    float:left;
}
p {
    background-color: #FFDD55;
}
<div class="box">
    <div class="float-box"></div>
</div>
<p>
    我上來咯~
</p>

結(jié)果會變成下圖所示,可以看到正常我們肯定是希望box在上而p在下的布局，但是由于box內(nèi)的子元素浮動后導(dǎo)致box的hight為0，導(dǎo)致p標(biāo)簽直接跑到了上邊

clearfix3.jpg

總結(jié)：回到標(biāo)題再來說說為何要清除浮動,清除浮動可以保證父元素(box)高度不被子元素(float-box)的浮動影響高度(父元素高度不定的情況下它的height是取決于子元素的),讓子元素回到父元素,從而保證在布局時不影響同級元素(p)

2.清除浮動的幾種方式

1. 在高度塌陷標(biāo)簽內(nèi)部最后添加一個標(biāo)簽

<div class="box">
      <div class="float-box"></div>
      <div style="clear:both"></div>    <!-- 可以清除浮動,無意義空標(biāo)簽，不建議使用 -->
</div>

2. 高度塌陷元素添加overflow屬性(auto或hidden)

3. 父元素本身也添加浮動

4. 使用css偽元素

.clearfix:after {
      content: '';
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
 }

.clearfix {
        zoom: 1;  /* ie6 ie7 haslayout */
}

優(yōu)化后的代碼

.clearfix:after {
      clear: both;
      content: '';
      display: table;
}

具體方式大家試一試吧，初學(xué)前端希望和更多的人交流~