float清除浮動

清除浮動：

在非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屬性。