清除浮動的本質：為了解決父級元素印子級浮動引起內部高度為0的問題。

方式1:額外標籤法（w3c推薦的方法）： 在最後一個浮動標籤後，新新增一個標籤

優點：通俗易懂，書寫方便。
缺點：不推薦使用，新增許多無意義的標籤，結構化較差。

.clear{
　　　clear:both;
　　　width:0;
　　　height:0;
}

方式2:父級新增overflow屬性方法

.father{
    　　　overflow:hidden;
  }

優點：程式碼簡捷。
缺點：內容增多時容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢位的元素。

方法3:為父元素新增after偽元素清除浮動

.clearfix:after{

　　　　　　content:"";//設定內容為空

　　　　　　height:0;//高度為0

　　　　　　display:block;//將文字轉為塊級元素

　　　　　　visibility:hidden;//將元素隱藏

　　　　　　clear:both//清除浮動

　　　　　}

.clearfix{

　　　　　*zoom:1;//zoom:1 就是IE6清除浮動的方式，* ie7以下的版本所識別

　　　　}

優點：符合閉合浮動思想，結構語義化正確。
缺點：由於IE6-7不支援：after，使用zoom：1觸發hasLayout。

方法4:為父元素新增before和after雙偽元素清除浮動

　.clearfix:before,.clearfix:after {
	          content: ""; 
              display: table;
        }
  .clearfix:after {
              clear: both;
        }
 .clearfix {
              *zoom: 1;
        }

優點：程式碼更簡潔
缺點：由於IE6-7不支援：after，使用zoom：1觸發hasLayout。

方法5:為父元素設定具體的寬和高的值

 .father{
	    　　　height:100px;//計算具體的值
	    　　　width:100%;
	  }

優點：通俗易懂，書寫方便。
缺點：不推薦使用，需要計算準確地值，且容易出現偏差。