清除浮動，這四種方法你還記得嗎？
為什麼要清除浮動？
清除浮動主要是為了解決，父元素因為子級元素浮動引起的內部高度為0的問題
1。如下，我給父盒子設定一個boder，內部放兩個盒子一個big 一個small，未給big和small設定浮動，則他們會預設撐開父盒子
2。當我給內部兩個盒子加上float屬性的時候
頂部深藍色盒子就會頂上來，然後父盒子因為沒設定高度，變成一條線，big和small已經浮動了
總結一下：
當父元素不給高度的時候，
內部元素不浮動時會撐開
而浮動的時候，父元素變成一條線
這時候很多人會想到新建標籤clear：both和float 方法，但是這兩種方法並不推薦使用！
什麼是clear：both
clear：both：本質就是閉合浮動， 就是讓父盒子閉合出口和入口，不讓子盒子出來
清除浮動的方法（最常用的4種）
1。額外標籤法（在最後一個浮動標籤後，新加一個標籤，給其設定clear：both；）（不推薦）
<！DOCTYPE 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執行，其他瀏覽器不執行*/
}
big
small
優點：符合閉合浮動思想，結構語義化正確
缺點：ie6-7不支援偽元素：after，使用zoom：1觸發hasLayout。
推薦使用
4。使用before和after雙偽元素清除浮動
。clearfix：after，。clearfix：before{
content： “”；
display： table；
}
。clearfix：after{
clear： both；
}
。clearfix{
*zoom： 1；
}
big
small
優點：程式碼更簡潔
缺點：用zoom：1觸發hasLayout。
推薦使用
作者：掘黃金的打工人
連結：
https：//
juejin。cn/post/69298893
26876590094
