清除浮動：
在非IE瀏覽器下，當容器的高度為auto，且容器的內容中有浮動（float為left或right）的元素，在這種情況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢出到容器外面而影響（甚至破壞）布局的現象。即父級對象盒子無法被撐開，這個現象叫浮動溢出，為了防止這個現象的出現而進行的CSS處理，就叫CSS清除浮動。
clear語法：
clear : none | left | right | both
取值：
none : 默認值。允許兩邊都可以有浮動對象
left : 不允許左邊有浮動對象
right : 不允許右邊有浮動對象
both : 不允許有浮動對象
但是需要注意的是：clear屬性只會對自身起作用，而不會影響其他元素。如果一個元素的右側有一浮動對象，而這個元素設置了不允許右邊有浮動對象，即clear：right，則這個元素會自動下移一格，達到本元素右邊沒有浮動對象的目的。
方法一：
<style>
.clearfix:after { <----在類名為“clearfix”的元素內最后面加入內容；
content: "."; <----內容為“.”就是一個英文的句號而已。也可以不寫。
display: block; <----加入的這個元素轉換為塊級元素。
clear: both; <----清除左右兩邊浮動。
visibility: hidden; <----可見度設為隱藏。注意它和display:none;是有區別的。visibility:hidden;仍然占據空間，只是看不到而已；
line-height: 0; <----行高為0；
height: 0; <----高度為0；
font-size:0; <----字體大小為0；
}
.clearfix { *zoom:1;} <----這是針對於IE6的，因為IE6不支持:after偽類，這個神奇的zoom:1讓IE6的元素可以清除浮動來包裹內部元素。
</style>
整段代碼就相當於在浮動元素后面跟了個寬高為0的空div，然后設定它clear:both來達到清除浮動的效果。
之所以用它，是因為，你不必在html文件中寫入大量無意義的空標簽，又能清除浮動。
那么問題來了，如何使用上面這段代碼呢？
只要寫一個.clearfix就行了，然后在需要清浮動的元素中 添加clearfix類名就好了。
如：
<div class="head clearfix"></div>
方法二：
直接在后面加上一個取消了浮動的空div：<div style="clear:both"></div>
方法三：
直接在父級元素加上overflow:hidden屬性。