首先,我們要思考一個問題:為什麼要清除浮動呢?在我做小demo的時候,碰到一個問題,當子項目浮動的時候,父元素的背景顏色消失了?可以說,以當時我的菜鳥水平,是不知道為什麼父元素的背景顏色為什麼會不見,我明明設定了背景顏色的,難道顏色格式不對?或者是瀏覽器不相容,是個css hack????????所有的猜測都指向了背景顏色,都是背景顏色的錯。
為什麼要清除浮動?
在坑中不斷掙紮的我,得到了答案,不是背景顏色的錯。而是它的子項目。當子項目浮動的時候會導致父元素的height變為0,這是為什麼呢?
原因是父元素沒有設定高度,原本的高度,是由子項目撐起來的。當子項目浮動的時候,子項目是脫離文檔流的,而父元素還是文檔流裡,這個時候,父元素的content沒有東西,所以父元素的height就變為原本沒有設定的高度(為0)。如果父元素的content中有非float的元素,則以這些元素的最高的高度撐起父元素的高度。:
HTML代碼
<p> <img src="./2.png" alt=""> <img src="./1.png" alt=""> <img src="./1.png" alt=""></p>
在沒有浮動時的情況:
HTML代碼
<p> //此時大圖片左浮動,及的效果 <img src="./2.png" alt="" style = "float: left;"> <img src="./1.png" alt=""> <img src="./1.png" alt=""></p>
在浮動時的情況:(大圖片float:left;小圖片不變)
可以從上面的分析得出。子項目浮動,會導致父元素出現“高度塌陷”。
如何清除浮動?
清除浮動的方式有很多種,目前看到有八種左右的清除浮動的方式。但真正用到項目裡,最常見的方式有兩種:
1.添加偽類:after;
2.觸發BFC;
1.添加偽類:after
給父元素添加一個類clearfix,並給這個類設定偽類:after。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title> <style> .clearfix:after { content: " "; display: block; clear: both; } .a { float: left; } </style></head><body> <p class="container clearfix"> <img src="./2.png" alt=""> <img src="./1.png" alt=""> <img src="./1.png" alt=""> </p> </body> </html>
看吧!這就是第一種清除浮動的方法。也是廣受歡迎的一種清除浮動個方式。
2.觸發BFC
1)什麼是BFC?
BFC(Block Formatting Context)是Web頁面中盒模型布局的CSS渲染模式。它的定位體系屬於常規文檔流。摘自W3C:
浮動,絕對位置元素,inline-blocks, table-cells, table-captions,和overflow的值不為visible的元素,(除了這個值已經被傳到了視口的時候)將建立一個新的塊級格式化上下文。
上面的引述幾乎總結了一個BFC是怎樣形成的。但是讓我們以另一種方式來重新定義以便能更好的去理解。一個BFC是一個HTML盒子並且至少滿足下列條件中的任何一個:
float的值不為none
position的值不為static或者relative
display的值為 table-cell, table-caption, inline-block, flex, 或者
inline-flex中的其中一個
overflow的值不為visible
2) 如何用BFC清除浮動
粗暴的總結就是讓浮動塊包含在同一個BFC中加同時(也可以理解為包含塊加屬性overflow:hidden)。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title> <style> .container { overflow: hidden; } .a { float: left; } </style></head><body> <p> <img src="./2.png" alt=""> <img src="./1.png" alt=""> <img src="./1.png" alt=""> </p> </body> </html>
有利也有弊,下面簡單指出BFC的缺點:
- display:table可能會產生一些問題
- overflow:scroll可能會顯示不必要的捲軸
- float:left將會把元素置於容器的左邊,其他元素環繞著它
- overflow:hidden將會剪下掉溢出的元素