為什么要清除浮動(dòng)
我們前面說過，浮動(dòng)本質(zhì)是用來做一些文字混排效果的，但是被我們拿來做布局用考抄，則會(huì)有很多的問題出現(xiàn)， 但是蔗彤，你不能說浮動(dòng)不好 川梅。?
由于浮動(dòng)元素不再占用原文檔流的位置，所以它會(huì)對(duì)后面的元素排版產(chǎn)生影響然遏，為了解決這些問題贫途，此時(shí)就需要在該元素中清除浮動(dòng)。
準(zhǔn)確地說待侵，并不是清除浮動(dòng)潮饱，而是清除浮動(dòng)后造成的影響
如果浮動(dòng)一開始就是一個(gè)美麗的錯(cuò)誤，那么請(qǐng)用正確的方法挽救它诫给。
清除浮動(dòng)本質(zhì)
清除浮動(dòng)主要為了解決父級(jí)元素因?yàn)樽蛹?jí)浮動(dòng)引起內(nèi)部高度為0 的問題香拉。
清除浮動(dòng)的方法
其實(shí)本質(zhì)叫做閉合浮動(dòng)更好一些, 記住啦扬，清除浮動(dòng)就是把浮動(dòng)的盒子圈到里面，讓父盒子閉合出口和入口不讓他們出來影響其他元素凫碌。
在CSS中扑毡，clear屬性用于清除浮動(dòng)，其基本語法格式如下：
選擇器{clear:屬性值;}? clear 清除
屬性值描述
left不允許左側(cè)有浮動(dòng)元素（清除左側(cè)浮動(dòng)的影響）
right不允許右側(cè)有浮動(dòng)元素（清除右側(cè)浮動(dòng)的影響）
both同時(shí)清除左右兩側(cè)浮動(dòng)的影響
額外標(biāo)簽法
是W3C推薦的做法是通過在浮動(dòng)元素末尾添加一個(gè)空的標(biāo)簽例如<divstyle=”clear:both”></div>盛险，或則其他標(biāo)簽br等亦可瞄摊。
優(yōu)點(diǎn)： 通俗易懂，書寫方便
缺點(diǎn)： 添加許多無意義的標(biāo)簽苦掘，結(jié)構(gòu)化較差换帜。? 我只能說，w3c你推薦的方法我不接受鹤啡，你不值得擁有惯驼。。递瑰。
父級(jí)添加overflow屬性方法
可以通過觸發(fā)BFC的方式祟牲，可以實(shí)現(xiàn)清除浮動(dòng)效果。（BFC后面講解）
可以給父級(jí)添加：overflow為hidden|auto|scroll都可以實(shí)現(xiàn)抖部。
優(yōu)點(diǎn)：? 代碼簡(jiǎn)潔
缺點(diǎn)：? 內(nèi)容增多時(shí)候容易造成不會(huì)自動(dòng)換行導(dǎo)致內(nèi)容被隱藏掉说贝，無法顯示需要溢出的元素。
使用after偽元素清除浮動(dòng)
:after 方式為空元素的升級(jí)版慎颗，好處是不用單獨(dú)加標(biāo)簽了
使用方法：
.clearfix:after{content:"";display:block;height:0;clear:both;visibility:hidden;? }
?
.clearfix{*zoom:1;}/* IE6乡恕、7 專有 */
優(yōu)點(diǎn)： 符合閉合浮動(dòng)思想? 結(jié)構(gòu)語義化正確
缺點(diǎn)： 由于IE6-7不支持:after，使用 zoom:1觸發(fā) hasLayout俯萎。
代表網(wǎng)站： 百度傲宜、淘寶網(wǎng)、網(wǎng)易等
注意： content:""? 盡量不帶點(diǎn)
使用before和after雙偽元素清除浮動(dòng)
使用方法：
.clearfix:before,.clearfix:after{
content:"";
display:table;/* 這句話可以出發(fā)BFC BFC可以清除浮動(dòng),BFC我們后面講 */
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;
}
優(yōu)點(diǎn)：? 代碼更簡(jiǎn)潔
缺點(diǎn)：? 由于IE6-7不支持:after讯屈，使用 zoom:1觸發(fā) hasLayout。
代表網(wǎng)站： 小米县习、騰訊等
