為什么清除浮動(dòng)？

1. 父級(jí)沒(méi)高度
2. 子盒子浮動(dòng)了
3. 影響下面布局了，我們就應(yīng)該清除浮動(dòng)了。

1. 額外標(biāo)簽法（隔墻法）

優(yōu)點(diǎn)：通俗易懂，書寫方便。
缺點(diǎn)：添加許多無(wú)意義的標(biāo)簽，結(jié)構(gòu)比較差
另外要求這個(gè)新的標(biāo)簽必須是塊級(jí)元素。
最后一個(gè)標(biāo)簽后面添加標(biāo)簽

<div style="clear:both;">
</div>

2. 父級(jí)overflow：hidden；

優(yōu)點(diǎn)：書寫簡(jiǎn)單
缺點(diǎn)：溢出隱藏

3. :after 方式是額外標(biāo)簽法的升級(jí)版，也是給父元素添加。

.clearfix:after {
  content: " ";
  display: block;
  height: 0;
  font-size: 0;
  visibility: hidden;
  clear: both;
}

.clearfix {/* IE6,7專有 */  由于這個(gè)版本不支持：after 會(huì)有兼容性問(wèn)題
  *zoom: 1;
}

.clearfix {
  *zoom:1;
  &:after {
      visibility: hidden;
      display: block;
      font-size: 0;
      content: " ";
      clear: both;
      height: 0;
  }
}

優(yōu)點(diǎn)：沒(méi)有增加標(biāo)簽，結(jié)構(gòu)更簡(jiǎn)單
缺點(diǎn)：照顧低版本瀏覽器
代表網(wǎng)站：百度 淘寶 網(wǎng)易等

4. 雙偽元素清除浮動(dòng)，也是給父元素添加

.clearfix:before, .clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear:both;
}

.clearfix {
  *zoom:1;
}

優(yōu)點(diǎn)：代碼更簡(jiǎn)潔
缺點(diǎn)：照顧低版本瀏覽器

點(diǎn)贊加關(guān)注，永遠(yuǎn)不迷路