CSS佈局中浮動問題的四種解決方案
阿新 • • 發佈：2020-08-29
一、起因：
子盒子設定浮動之後效果：
由此可見，藍色的盒子設定浮動之後，因為脫離了標準文件流，它撐不起父盒子的高度，導致父盒子高度塌陷。如果網頁中出現了這種問題，會導致我們整個網頁的佈局紊亂
二、解決方案：
- 父盒子設定固定高度
- 內牆法
- 偽元素清除法
- overflow:hidden
（1）父盒子設定固定高度
雖然，給父盒子設定了固定高度能暫時解決我們的問題，但是它的使用不靈活，如果未來子盒子的高度需求發生了改變(網頁的多處地方)，那麼我們得手動需要更改父盒子的高度。後期不易維護。
應用：網頁中盒子固定高度區域，比如固定的導航欄。
缺點：使用不靈活，後期不易維護
（2）內牆法
在浮動元素的後面加一個空的塊級元素(通常是div),並且該元素設定 clear:both；屬性。clear屬性，字面意思就是清除，那麼both,就是清除浮動元素對我左右兩邊的影響。
程式碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>浮動元素的破壞性</title> <style type="text/css"> .father{ border: 1px solid red; } .child{ width: 200px; height: 200px; float: left; background-color: green; } .clearfix{ clear: both; } </style> </head> <body> <div class="father"> <div class="child">兒子</div> <div class="clearfix"></div></div> </body> </html>
應用：網頁中應用不多，只是為了引導下一個清除浮動的方式。
缺點：結構冗餘
（3）偽元素清除法
內牆法是在浮動元素的後面加一個空的塊級元素(通常是div),並且該元素設定clear:both；屬性。
那麼正好在css3的屬性用法中整好有個選擇器也完全符合這個用法，偽元素選擇器。偽元素選擇器很簡單。就像偽類一樣，讓偽元素添加了選擇器，但不是描述特殊的狀態，允許為元素的某些部分設定樣式。
（4）overflow:hidden