一、爲什麼要清除浮動？
是爲了解決 父元素因爲子元素浮動而引起的內部高度爲0的問題。
佈局：
<body>
<div class="father">
<div class="big">盒子1</div>
<div class="small">盒子2</div>
大盒子
</div>
</body>
樣式：
<style>
.father{
border: 1px solid darkred;
width: 400px;
}
.big{
width: 100px; height: 100px;
background-color: orangered;
}
.small{
width: 50px; height: 50px;
background-color: mediumpurple;
}
</style>
盒子1和2都設置浮動後
.big, .small{
float: left;
}
二、解決方法
1.額外標籤法
在最後一個浮動標籤後，新加一個標籤，給其設置clear：both；
<div class="fahter">
<div class="big">big</div>
<div class="small">small</div>
<div class="clear">額外標籤法</div>
</div>
// css：
.clear{
clear:both;
}
優點：通俗易懂，方便
缺點：添加無意義標籤，語義化差。不推薦使用！
2.父元素添加overflow屬性
通過觸發BFC方式，實現清除浮動。
.father{
border: 1px solid darkred;
width: 400px;
overflow: hidden;
}
優點：代碼簡潔
缺點：內容增多的時候容易造成不會自動換行導致內容被隱藏掉，無法顯示要溢出的元素，不推薦使用！
3.使用after僞元素清除浮動（推薦使用）
// 先給父元素增加一個類名 clearfix ，然後在樣式中添加如下內容
.clearfix:after{
display: block;
content: '';
clear: both;
visibility:hidden; // 允許瀏覽器渲染，但不顯示出來，這樣才能實現清除浮動。
}
.clearfix{
*zoom: 1;/*ie6清除浮動的方式， *號只有IE6-IE7執行，其他瀏覽器不執行*/
}
優點：符合閉合浮動思想，結構語義化正確
缺點：ie6-7不支持僞元素 :after，使用zoom:1觸發hasLayout。
4.使用before和after雙僞元素清除浮動
.clearfix:after, .clearfix:before{
content: "";
display: block;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
優點：代碼更簡潔
缺點：用zoom:1觸發hasLayout。