Canalys：預計 2021-2024 年摺疊屏智慧手機出貨量年複合增長率達 53%
阿新 • • 發佈：2022-03-05
為什麼需要清除浮動
在一般情況下，一個盒子裡使用了 CSS float 屬性，導致父級盒子不能被撐開;
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>清除浮動</title> <style type="text/css"> .root { border: 2px solid; margin: 20px; } .item { width: 200px; height: 200px; border: 2px green solid; margin: 20px; } .item.left { float: left; } .item.right { float: right; } </style> </head> <body> <div class="root"> <div class="item left"></div> <div class="item right"></div> </div> </body> </html>
效果圖：
本來兩個綠色物件盒子是在黑色盒子內，因為對兩個綠色盒子使用了float浮動，所以兩個黑色盒子產生了浮動，導致黑色盒子不能撐開；
副作用：由於父級盒子不能被撐開，導致父級盒子CSS背景不能顯示，邊框不能隨內容撐開，margin、padding設定值而不能正確顯示；
清除浮動的幾種常見的作法
-
clear: both;清除浮動：
在父級元素結束標籤前加一個空的div元素，給空元素設定clear: both;
<style type="text/css"> .clear { clear: both; } /*剩餘樣式省略，參考文章開頭*/ </style> <div class="root"> <div class="item left"></div> <div class="item right"></div> <div class="clear"></div> </div>
效果圖:
缺點：添加了不必要的空元素；
2. overflow: hidden;清除浮動:
給父級元素設定overflow:hidden;
<style type="text/css"> .root { border: 2px solid; margin: 20px; overflow: hidden; } /*剩餘樣式省略，參考文章開頭*/ </style> <div class="root"> <div class="item left"></div> <div class="item right"></div> </div>
效果圖:
缺點：內容增多的時候容易造成不會自動換行導致內容被隱藏掉，無法顯示要溢位的元素;
3. ::after偽元素清除浮動:
<style type="text/css">
.clear::after {
height: 0;
clear: both;
content: "";
display: block;
visibility: hidden;
}
.clear {
/*ie6清除浮動的方式 *號只有IE6-IE7執行，其他瀏覽器不執行*/
*zoom: 1;
}
/*剩餘樣式省略，參考文章開頭*/
</style>
<div class="root clear">
<div class="item left"></div>
<div class="item right"></div>
</div>
效果圖:
缺點：ie6-7不支援偽元素::after，使用zoom:1觸發hasLayout;