為什么要清除浮動炸宵？
當容器的高度為auto，且容器的內(nèi)容中有浮動（float為left或right）的元素谷扣，在這種情況下土全，容器的高度不能自動伸長以適應內(nèi)容的高度，使得內(nèi)容溢出到容器外面而影響（甚至破壞）布局的現(xiàn)象会涎，這個現(xiàn)象叫浮動溢出裹匙。為了防止這個現(xiàn)象的出現(xiàn)而進行的CSS處理，就叫CSS清除浮動末秃。
清除浮動主要是為了解決父元素因為子級元素浮動引起的內(nèi)部高度塌陷的問題概页。
清除浮動的方法
基本實例代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮動</title>
<style>
#father{
border: 1px solid black;
}
#son{
width: 100px;
height: 100px;
background: red;
float: left;
}
</style>
</head>
<body>
<div id="father">
<div id="son"></div>
</div>
</body>
</html>
此時未清除浮動，父盒子高度為0
1.png
此時清除浮動练慕，父盒子高度為子盒子高度
2.png
一：為父元素設置高度
簡單粗暴绰沥，但后期維護麻煩
二：父元素添加over：hidden
通過觸發(fā)BFC方式篱蝇，來清除浮動
#father{
overflow: hidden;
}
三：使用after偽元素清除浮動
#father:after{
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
#father{
/*瀏覽器兼容*/
*zoom: 1;
}
四：使用before和after偽元素清除浮動
#father:after,
#father:before{
content: "";
display: table;
}
#father:after{
clear: both;
}
