為什么要清除浮動萧诫？
清除浮動主要是為了解決斥难，父元素因為子級元素浮動引起的內(nèi)部高度為0的問題
1.如下，我給父盒子設(shè)置一個boder帘饶，內(nèi)部放兩個盒子一個box1 一個box2哑诊，未給box1和box2設(shè)置浮動，則他們會默認(rèn)撐開父盒子.
2.當(dāng)我們給內(nèi)部兩個盒子都加上float屬性的時候及刻。
我們已經(jīng)給box1和box2加上浮動屬性了镀裤，因為父元素沒有加高度導(dǎo)致底部黃色的盒子頂了上來，變成了一條線缴饭。
總結(jié)一下：
當(dāng)父元素不給高度的時候暑劝，內(nèi)部的子元素會自動撐開；而浮動時父元素會變成一條線颗搂。
那我們該怎么解決這個問題呢担猛，往下看。
清除浮動的方法（最常用的4種）
1.額外標(biāo)簽法（在最后一個浮動標(biāo)簽后，新加一個空div標(biāo)簽傅联，給其設(shè)置clear：both先改；）（不推薦）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
border:1px solid red;
width:500px;
}
.box1 {
width:100px;
height:100px;
background:pink;
float:left;
}
.box2 {
width:50px;
height:50px;
background:blue;
float:left;
}
.footer {
width:400px;
height:50px;
background:yellow;
}
.clear {
clear:both;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="clear">額外的</div>
</div>
<div class="footer"></div>
</body>
</html>
效果如下：
如果我們清除了浮動，父元素就會自動檢測盒子最高的高度蒸走，然后與他同高仇奶。
優(yōu)點：通俗易懂，方便载碌。
缺點：添加無意義的標(biāo)簽猜嘱，語義化差。
2.父級添加overflow屬性（父元素添加overflow:hidden）（不推薦）
通過觸發(fā)BFC方式嫁艇，實現(xiàn)清除浮動
.fahter{
width: 400px;
border: 1px solid deeppink;
overflow: hidden;
}
優(yōu)點：代碼簡潔
缺點：內(nèi)容增多的時候容易造成不會自動換行導(dǎo)致內(nèi)容被隱藏掉朗伶，無法顯示要溢出的元素(不推薦使用)
3.使用after偽元素清除浮動（推薦使用）
.clearfix:after{/*偽元素是行內(nèi)元素 正常瀏覽器清除浮動方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮動的方式 *號只有IE6-IE7執(zhí)行，其他瀏覽器不執(zhí)行*/
}
<body>
<div class="fahter clearfix">
<div class="big">big</div>
<div class="small">small</div>
</div>
<div class="footer"></div>
</body>
優(yōu)點：符合閉合浮動思想步咪，結(jié)構(gòu)語義化正確
缺點：ie6-7不支持偽元素：after论皆，使用zoom:1觸發(fā)hasLayout.(推薦使用)
4.使用before和after雙偽元素清除浮動(代碼簡潔，推薦使用)
.clearfix::before,
.clearfix::after {
content: "";
clear: both;
display: block;
}
<div class="box clearfix">
<div class="box1">box1</div>
<div class="box2">box2</div>
</div>
<div class="footer"></div>
