什麼是CSS清除浮動？
在非IE瀏覽器下，當容器的高度爲auto，且容器的內容中有浮動（float爲left或right）的元素，在這種情況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢出到容器外面而影響佈局的現象。這個現象叫浮動溢出，爲了防止這個現象的出現而進行的CSS處理，就叫CSS清除浮動。
<style>
.div1 {
width: 200px;
height: auto;
border: 1px solid salmon;
}
.div2 {
width: 30px;
height: 30px;
float: left;
background: royalblue;
}
.div3 {
width: 30px;
height: 30px;
float: right;
background: rosybrown;
}
</style>
<body>
<div class="div1">
<div class="div2">
div2
</div>
<div class="div3">
div3
</div>
</div>
</body>
如圖所示，容器沒有包圍浮動元素。
清除浮動的方法
1.使用帶clear屬性的空元素
在浮動元素後使用一個空元素，賦予clear:both屬性進行清理
<style>
...同上
.clear {
clear: both;
}
</style>
<body>
<div class="div1">
<div class="div2">
div2
</div>
<div class="div3">
div3
</div>
<div class="clear"></div>
</div>
</body>
2.使用CSS的overflow屬性
給浮動元素的容器增加overflow:hidden；或者overflow:auto；浮動元素又回到了容器層，把容器高度撐起，實現清除浮動。
3.給浮動元素的容器添加浮動
給浮動元素的容器也添加上浮動屬性即可清除內部浮動，不推薦。
4.使用下一個相鄰的元素處理
給浮動後面的元素添加clear屬性
<style>
.div1 {
width: 200px;
height: auto;
border: 1px solid salmon;
float: left;
}
.div2 {
width: 30px;
height: 30px;
float: left;
background: royalblue;
}
.div3 {
width: 30px;
height: 30px;
float: right;
background: rosybrown;
}
.div4{
clear: both;
width: 30px;
height: 30px;
background: rebeccapurple;
}
</style>
<body>
<div class="div1">
<div class="div2">
div2
</div>
<div class="div3">
div3
</div>
<div class="div4">
div4
</div>
</div>
</body>
5.使用CSS的:after僞元素
結合 :after 僞元素（注意這不是僞類，而是僞元素，代表一個元素之後最近的元素）和 IEhack （觸發 hasLayout）。
給浮動元素的容器添加一個clearfix的class，然後給這個class添加一個:after僞元素實現元素末尾添加一個看不見的塊元素（Block element）清理浮動。
<style>
.div1 {
width: 200px;
height: auto;
border: 1px solid salmon;
float: left;
}
.div2 {
width: 30px;
height: 30px;
float: left;
background: royalblue;
}
.div3 {
width: 30px;
height: 30px;
float: right;
background: rosybrown;
}
.clearfix:after {
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* 爲了IE6和IE7瀏覽器，觸發 hasLayout */
zoom: 1;
}
</style>
<body>
<div class="div1">
<div class="div2">
div2
</div>
<div class="div3">
div3
</div>
</div>
</body>