清除浮動的最常用的三種方法,以及優缺點
為什麼要清除浮動?
清除浮動主要是為了解決,父元素因為子級元素浮動引起的內部高度為0的問題
1.如下,我給父盒子設定一個boder,內部放兩個盒子一個big 一個small,未給big和small設定浮動,則他們會預設撐開父盒子
2.當我給內部兩個盒子加上float屬性的時候
頂部深藍色盒子就會頂上來,然後父盒子因為沒設定高度,變成一條線,big和small已經浮動了
總結一下:
當父元素不給高度的時候,
內部元素不浮動時會撐開
而浮動的時候,父元素變成一條線
這時候很多人會想到新建標籤clear:both和float 方法,但是這兩種方法並不推薦使用!
什麼是clear:both
clear:both:本質就是閉合浮動, 就是讓父盒子閉合出口和入口,不讓子盒子出來
清除浮動的方法(最常用的3種)
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.
推薦使用
————————————————
版權宣告:本文為CSDN博主「h_qingyi」的原創文章,遵循CC 4.0 BY-SA版權協議,轉載請附上原文出處連結及本宣告。
原文連結:https://blog.csdn.net/h_qingyi/article/details/81269667