每當我們需要使用float來設置元素的時候，因爲float這個屬性自身不佔據空間的原因：下層塊級元素擠壓上層塊級元素，導致畫面無法顯示出來，因此需要清除浮動，而清除浮動有兩個方法：
一.設置父元素的height屬性
當設置完父元素height屬性以後，只需根據子元素的高度來對父元素進行變動：
.father{
background-color: #0f0;
width: 600px;
height: 300px;
}
此時父元素的高度爲300，無論子元素如何進行浮動，自家的位子都不會被下面的老王侵佔
二.讓浮動的子元素參與父元素的高度計算
.clearfix:after{
content:'';
visibility: hidden;
height: 0;
display: block;
clear: both;
}
代碼解讀：
這段清除浮動的CSS代碼使用僞類選擇器，讓需要清除浮動的元素後面添加一個clearfix子元素，相當於多了一個clearfix的私生子：
content:'';:設置該子元素的內容爲空
visibility hidden;:將其隱藏，但是仍然佔據空間
height: 0;:不用指定高度
display: block;:設置該子類爲塊級元素
clear: both;:自動計算margin的值，以最高的那個規定父元素的高度
示例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father{
background-color: #0f0;
width: 600px;
}
.clearfix:after{/*在father的最後面，再添加一個clearfix的私生子(子元素)*/
content:'';/*子元素的內容爲空*/
visibility: hidden;
height: 0;/*不用指定高度*/
display: block;/*塊級元素*/
clear: both; /*自動計算margin的值，以最高的那個規定父元素的高度*/
}
.one{
width: 200px;
height: 300px;
background-color: #f00;
float: left;
}
.two{
width: 100px;
height: 300px;
background-color: hotpink;
float: right;
}
.uncle-wang{
width: 600px;
height: 600px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="one"></div>
<div class="two"></div>
</div>
<div class="uncle-wang"></div>
</body>
</html>