關於浮動元素float使其父元素高度塌陷的緣由及解決方法

浮動元素使其父元素高度塌陷

咱們常常會遇到一種狀況，給一個元素設置浮動以後 float:left/right;，若是該元素的父元素有背景顏色，那麼會發現父元素的背景顏色消失了；若是父元素有一個邊框，那麼浮動元素沒法將邊框撐開。

這就要回到浮動元素的特性來講明此問題「當元素設置浮動後，會自動脫離文檔流」，翻譯成白話就是說，元素浮動後，就不在整個文檔流的管轄範圍，那麼它以前存在在父元素內的高度就隨着浮動不復存在了，而此時父元素會默認本身裏面沒有任何內容（前提是未給父元素設置固定高度，若是父元素自己有固定高度，就不會出現這種狀況）

解決方法：

一、給父元素也添加float。這樣讓父元素與子元素一塊兒脫離文檔流浮動起來，保證子元素在父元素內，這樣父元素就能自適應子元素的高度，可是此方法有一弊端，必定會影響父元素以後的元素排列，甚至影響佈局。
二、給父元素一個固定高度，此方法適用於子元素高度已知而且固定的狀況。
三、添加一個塊級元素，並給此元素設置clear:both;清除浮動。在很早以前用的就是這種解決辦法，新建一個空的div，爲這個div設置clear：both；這樣無疑是增長了無心義的標籤，一個大型頁面中，這種標籤太可能是很差的。
四、給父元素添加 overflow：hidden；【後有詳解】
五、經過僞類::after清除浮動 【後有詳解】

overflow:hidden;

隱藏溢出，當內容超過其父元素時，可使用該屬性和值將溢出的部分裁剪掉，使頁面更加美觀
清除浮動，當子元素浮動時，給父元素添加overflow：hidden，按照它的第一個特性，應該將子元素超出的部分截掉，可是由於子元素有浮動，沒法裁剪，全部只能由父元素增長高度去包裹住子元素，使得父元素擁有了高度，而這個高度是跟隨子元素自適應的高度，這樣就把浮動的子元素包含在父元素內了。
::after 僞類

利用僞類來清楚浮動，其效果跟建立一個空的div並設置其爲clear：both；是同樣的，只不過這裏用僞類代替了空的div元素
<div class="box">
<div class="son">我是浮動的子元素</div>
</div>
1
2
3
.box {
width:400px;
background:#F00;
}
.son {
float:left;
}
.son::after {
content:"";
clear:both;/*清除浮動*/
display:block;/*確保該元素是一個塊級元素*/
}
————————————————

原文連接：https://blog.csdn.net/chris_z_0622/article/details/65442975