為什麼要清除浮動？
（清除浮動主要是為了解決，父元素因為子級元素浮動引起的内部高度為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: " ";/* content中包含的空格也能生效，舊版本Opera浏覽器中有個隐藏的bug，需要添加一個空格字元才能解決 */
display: block;
clear:both;
/*
下面兩個屬性取消後，也可以清除浮動。
我個人了解如下，為了保證after不在界面顯示，是以使用了下方屬性。
*/
height: 0;/* 高度為0，隐藏元素 */
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: " ";/* content中包含的空格也能生效，舊版本Opera浏覽器中有個隐藏的bug，需要添加一個空格字元才能解決 */
/* 外邊距無法通過單元格元素折疊 */
display: table;/* 防止僞元素外邊距折疊 */
}
/* 隻有after僞元素需要清除浮動 */
.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.
此文章是轉載于其他部落客，如有侵權，請聯系删除
轉載來源：https://blog.csdn.net/h_qingyi/article/details/81269667
說明：原文部份内容，我做出了删除和添加（參考書籍：深入解析CSS）。