一为肮、為什么要清除浮動(dòng)
浮動(dòng)本質(zhì)是用來(lái)做一些文字混排效果的证逻，但是被我們拿來(lái)做布局用义桂，則會(huì)有很多的問(wèn)題出現(xiàn)畴栖。
清除浮動(dòng)的本質(zhì)：
為解決父級(jí)元素因?yàn)樽蛹?jí)浮動(dòng)引起高度為0的問(wèn)題
我們很多時(shí)候不方便給父盒子的高度随静，因?yàn)槲覀儾磺宄卸嗌僮雍凶樱卸嗌賰?nèi)容吗讶。經(jīng)常會(huì)讓內(nèi)容撐開(kāi)父盒子的高度燎猛。
但是如果父盒子中有子盒子浮動(dòng)了之后，就會(huì)影響到后面的盒子照皆，因?yàn)楦?dòng)元素脫離了標(biāo)準(zhǔn)流重绷。會(huì)把后面還在標(biāo)準(zhǔn)流的盒子覆蓋，解決這個(gè)問(wèn)題的方法就要清除浮動(dòng)
原理圖
二膜毁、如何清除浮動(dòng)
清除浮動(dòng)其實(shí)叫做閉合浮動(dòng)更合適昭卓，因?yàn)槭前迅?dòng)的元素圈起來(lái)，讓父元素閉合出口和入口不讓他們出來(lái)影響其他的元素爽茴。
在CSS中葬凳，clear屬性用于清除浮動(dòng)，其基本語(yǔ)法格式如下：
選擇器{clear:屬性值;}
/*屬性值為left,清除左側(cè)浮動(dòng)的影響
屬性值為right,清除右側(cè)浮動(dòng)的影響
屬性值為both,同時(shí)清除左右兩側(cè)浮動(dòng)的影響*/
1. 額外標(biāo)簽法
**2.1 **
末尾標(biāo)簽法室奏，通過(guò)在浮動(dòng)元素的末尾添加一個(gè)空的標(biāo)簽火焰。這是W3C推薦的做法，雖然比較簡(jiǎn)單胧沫，但是添加了無(wú)意義的標(biāo)簽昌简，結(jié)構(gòu)化比較差，所以不推薦使用绒怨。下面三種寫(xiě)法都適用：
1. <div style="clear:both"></div>
2. .clear { clear:both }
<div class="clear"></div>
3..clear{ clear:both }
<br class="clear" /> <!--也可以使用br等別的塊級(jí)元素來(lái)清除浮動(dòng)-->
**2.2 **
內(nèi)部標(biāo)簽法纯赎，把div放進(jìn)父盒子里，盒子會(huì)撐開(kāi)南蹂，一般也不會(huì)用犬金。
2. overflow
給父級(jí)元素添加overflow樣式方法。
代碼比較簡(jiǎn)潔，可以通過(guò)觸發(fā)BFC方式晚顷，但是因?yàn)楸旧韔verflow的本質(zhì)是溢出隱藏的效果峰伙，所以有的時(shí)候也會(huì)有一些問(wèn)題存在，比如內(nèi)容增多的時(shí)候不會(huì)自動(dòng)換行導(dǎo)致內(nèi)容被隱藏掉该默，無(wú)法顯示出要溢出的元素瞳氓。
.father {
overflow: auto;
/* 加上這句話(huà)，就可以清除浮動(dòng) overflow = hidden|auto|scroll 都可以實(shí)現(xiàn)*/
}
3. 偽元素法（最常用）
3.1 使用after偽元素清除浮動(dòng)
after是在父元素中加一個(gè)盒子栓袖，這個(gè)元素是通過(guò)css添加上去的匣摘，符合閉合浮動(dòng)思想，結(jié)構(gòu)語(yǔ)義化正確裹刮。
父元素中加一個(gè)類(lèi)名為clearfix 音榜。但是這個(gè)方法IE6，7不識(shí)別必指，要進(jìn)行兼容囊咏，使用zoom:1觸發(fā) hasLayout來(lái)清除浮動(dòng)
代表網(wǎng)站：百度、淘寶塔橡、網(wǎng)易等
.clearfix:after{
content:"."; /*盡量不要為空梅割，一般寫(xiě)一個(gè)點(diǎn)*/
height:0; /*盒子高度為0，看不見(jiàn)*/
display:block; /*插入偽元素是行內(nèi)元素葛家，要轉(zhuǎn)化為塊級(jí)元素*/
visibility:hidden; /*content有內(nèi)容户辞，將元素隱藏*/
clear:both;
}
.clearfix {
*zoom: 1; /* *只有IE6,7識(shí)別 */
}
3.2 after偽元素空余字符法
父元素中加一個(gè)類(lèi)名為clearfix，也需要兼容IE6癞谒、7
在Unicode字符里有一個(gè)“零寬度空格”底燎，即U+200B，代替“.”弹砚，可以減少代碼量双仍，不再使用visibility:hidden
代表網(wǎng)站：阿里巴巴
.clearfix::after{
content:"\200B"; /* content:'\0200'; 也可以 */
display:block;
height:0;
clear:both;
}
.clearfix {
*zoom: 1;
}
3.3 使用before和after雙偽元素清除浮動(dòng)（推薦）
完全符合閉合浮動(dòng)思想的方法。
父元素中加一個(gè)類(lèi)名為clearfix,需要兼容IE6桌吃、7
代表網(wǎng)站：小米朱沃、騰訊
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
?copyright burning.
