版權聲明：本文為博主原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。
本文鏈接：https://blog.csdn.net/h_qingyi/article/details/81269667
為什么要清除浮動？
清除浮動主要是為了解決，父元素因為子級元素浮動引起的內部高度為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;
}
優點：代碼簡潔
缺點：內容增多的時候容易造成不會自動換行導致內容被隱藏掉，無法顯示要溢出的元素
不推薦使用
{
什么是BFC
BFC：塊級格式化上下文，它是指一個獨立的塊級渲染區域，只有Block-level BOX參與，該區域擁有一套渲染規則來約束塊級盒子的布局，且與區域外部無關。
在一個Web頁面的CSS渲染中，塊級格式化上下文 (Block Fromatting Context)是按照塊級盒子布局的。W3C對BFC的定義如下：
浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不為“visiable”的塊級盒子，都會為他們的內容創建新的BFC（塊級格式上下文）。 為了便於理解，我們換一種方式來重新定義BFC。一個HTML元素要創建BFC，則滿足下列的任意一個或多個條件即可：
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible
BFC是一個獨立的布局環境，其中的元素布局是不受外界的影響，並且在一個BFC中，塊盒與行盒（行盒由一行中所有的內聯元素所組成）都會垂直的沿着其父元素的邊框排列。
怎么創建BFC
要顯示的創建一個BFC是非常簡單的，只要滿足上述4個CSS條件之一就行。例如：
<div class="container"> 你的內容 </div> 在類container中添加類似 overflow: scroll，overflow: hidden，display: flex，float: left，或 display: table 的規則來顯示創建BFC。雖然添加上述的任意一條都能創建BFC，但會有一些副作用：
1、display: table 可能引發響應性問題
2、overflow: scroll 可能產生多余的滾動條
3、float: left 將把元素移至左側，並被其他元素環繞
4、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.
推薦使用
————————————————
版權聲明：本文為CSDN博主「h_qingyi」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/h_qingyi/article/details/81269667