浮動元素使其父元素高度塌陷
我們經常會遇到一種情況，給一個元素設置浮動之后 float:left/right;，如果該元素的父元素有背景顏色，那么會發現父元素的背景顏色消失了；如果父元素有一個邊框，那么浮動元素無法將邊框撐開。
這就要回到浮動元素的特性來說明此問題“當元素設置浮動后，會自動脫離文檔流”，翻譯成白話就是說，元素浮動后，就不在整個文檔流的管轄范圍，那么它之前存在在父元素內的高度就隨着浮動不復存在了，而此時父元素會默認自己里面沒有任何內容（前提是未給父元素設置固定高度，如果父元素本身有固定高度，就不會出現這種情況）
解決方法：
1、給父元素也添加float。這樣讓父元素與子元素一起脫離文檔流浮動起來，保證子元素在父元素內，這樣父元素就能自適應子元素的高度，但是此方法有一弊端，一定會影響父元素之后的元素排列，甚至影響布局。
2、給父元素一個固定高度，此方法適用於子元素高度已知並且固定的情況。
3、添加一個塊級元素，並給此元素設置clear:both;清除浮動。在很早之前用的就是這種解決辦法，新建一個空的div，為這個div設置clear：both；這樣無疑是增加了無意義的標簽，一個大型頁面中，這種標簽太多是不好的。
4、給父元素添加 overflow：hidden；【后有詳解】
5、通過偽類::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