清除浮動的最常用的四種方法，以及優缺點
阿新 • • 發佈：2019-01-01
為什麼要清除浮動？
清除浮動主要是為了解決，父元素因為子級元素浮動引起的內部高度為0的問題
1.如下，我給父盒子設定一個boder，內部放兩個盒子一個big 一個small，未給big和small設定浮動，則他們會預設撐開父盒子
2.當我給內部兩個盒子加上float屬性的時候
頂部深藍色盒子就會頂上來，然後父盒子因為沒設定高度，變成一條線，big和small已經浮動了
總結一下：
當父元素不給高度的時候，
內部元素不浮動時會撐開
而浮動的時候，父元素變成一條線
這時候很多人會想到新建標籤clear：both和float 方法，但是這兩種方法並不推薦使用！
什麼是clear：both
clear：both：本質就是閉合浮動， 就是讓父盒子閉合出口和入口，不讓子盒子出來
清除浮動的方法（最常用的4種）
1.額外標籤法（在最後一個浮動標籤後，新加一個標籤，給其設定clear：both；）（不推薦）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .fahter{ width: 400px; border: 1px solid deeppink; } .big{ width: 200px; height: 200px; background: darkorange; float: left; } .small{ width: 120px; height: 120px; background: darkmagenta; float: left; } .footer{ width: 900px; height: 100px; background: darkslateblue; } .clear{ clear:both; } </style> </head> <body> <div class="fahter"> <div class="big">big</div> <div class="small">small</div> <div class="clear">額外標籤法</div> </div> <div class="footer"></div> </body> </html>
此時
如果我們清除了浮動，父元素自動檢測子盒子最高的高度，然後與其同高。
優點：通俗易懂，方便
缺點：新增無意義標籤，語義化差
不建議使用。
2.父級新增overflow屬性（父元素新增overflow:hidden）（不推薦）
通過觸發BFC方式，實現清除浮動
.fahter{
width: 400px;
border: 1px solid deeppink;
overflow: hidden;
}優點：程式碼簡潔
缺點：內容增多的時候容易造成不會自動換行導致內容被隱藏掉，無法顯示要溢位的元素
不推薦使用
3.使用after偽元素清除浮動（推薦使用）
.clearfix:after{/*偽元素是行內元素 正常瀏覽器清除浮動方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮動的方式 *號只有IE6-IE7執行，其他瀏覽器不執行*/
}
<body>
<div class="fahter clearfix">
<div class="big">big</div>
<div class="small">small</div>
<!--<div class="clear">額外標籤法</div>-->
</div>
<div class="footer"></div>
</body>優點：符合閉合浮動思想，結構語義化正確
缺點：ie6-7不支援偽元素：after，使用zoom:1觸發hasLayout.
推薦使用
4.使用before和after雙偽元素清除浮動
.clearfix:after,.clearfix:before{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
<div class="fahter clearfix">
<div class="big">big</div>
<div class="small">small</div>
</div>
<div class="footer"></div>優點：程式碼更簡潔
缺點：用zoom:1觸發hasLayout.
推薦使用