??清除浮動(dòng)主要是為了解決父級(jí)元素因?yàn)樽蛹?jí)浮動(dòng)脫標(biāo)引起內(nèi)部高度為0的問(wèn)題，常見(jiàn)的清除浮動(dòng)方法如下四種：

1.額外標(biāo)簽法

??在父級(jí)中浮動(dòng)的盒子后面添加一個(gè)空盒子，并給這個(gè)空盒子添加清除浮動(dòng)
優(yōu)點(diǎn)：通俗易懂，書(shū)寫(xiě)方便
缺點(diǎn)：會(huì)增加頁(yè)面無(wú)意義的標(biāo)簽，結(jié)構(gòu)化較差

html:
<div class="father">
    <div class="son1">左浮動(dòng)</div>
    <div class="son2">右浮動(dòng)</div>
    <div class="clear"></div>//空盒子用來(lái)清除浮動(dòng)
</div>
css:
  .father{ width:100%;}
  .son1{  width:50%;  heigth:100px;  float:left;}
  .son2{ width:50%;  heigth:100px;  float:right;}
  .clear{ clear:both;} // 清除左右浮動(dòng)

2.父級(jí)添加overflow方法

??可以通過(guò)觸發(fā)BFC的方式，實(shí)現(xiàn)清除浮動(dòng)的效果，給父級(jí)添加 overflow:hidden|auto|scroll即可。
優(yōu)點(diǎn)：代碼簡(jiǎn)潔
缺點(diǎn)：當(dāng)內(nèi)容較多時(shí)，不會(huì)自動(dòng)換行，內(nèi)容會(huì)隱藏?zé)o法展示溢出的內(nèi)容

3.使用after偽元素清除浮動(dòng)

:after方式為額外標(biāo)簽的升級(jí)版，在需要清除浮動(dòng)的盒子添加clearfix類(lèi)名就好了

.clearfix:after{content:'.';display:block;height:0;clear:both;visibility:hidden;}
.clearfix{*zoom:1;} //兼容 IE6  IE7 觸發(fā)hasLayout

優(yōu)點(diǎn)：不用額外添加無(wú)意義的標(biāo)簽，符合閉合浮動(dòng)思想，結(jié)構(gòu)語(yǔ)義化正確
缺點(diǎn)：IE6/7不支持:after，使用zoom:1觸發(fā)hasLayout
注意：content:'.'里面跟一個(gè)小點(diǎn)，不要為空，因?yàn)閒irefox7.0以前的版本會(huì)生成空格

4.使用before和after雙偽元素清除浮動(dòng) 推薦使用

.clearfix:before,clearfix:after{content:'.';display:table;}
.clearfix:after{clear:both}
.clearfix{*zoom:1;} //兼容 IE6  IE7 觸發(fā)hasLayout

優(yōu)點(diǎn)：代碼簡(jiǎn)潔，完全符合閉合浮動(dòng)思想，清除浮動(dòng)首選，良心推薦！
缺點(diǎn)：IE6/7不支持:after，使用zoom:1觸發(fā)hasLayout
注意：content:'.'里面跟一個(gè)小點(diǎn)，不要為空，因?yàn)閒irefox7.0以前的版本會(huì)生成空格