清除浮動的幾種方式及優缺點總結

一、額外標簽法(在最后一個浮動元素的后面新加一個標簽如<div class="clear"></div>，並在其CSS樣式中設置clear: both;)

優點：簡單，通俗易懂，寫少量代碼，兼容性好
缺點：額外增加無語義html元素，代碼語義化差，后期維護成本大

二、給父級設置高度

優點：簡單，寫少量代碼，容易掌握
缺點：不夠靈活，只適用於高度固定的布局

三、觸發父BFC(如給父元素設置overflow:hidden，特別注意的是：在IE6中還需要觸發hasLayout，例如給父元素設置zoom:1。原理是觸發父級BFC后，父元素在計算高度時，浮動的子元素也會參與計算)

優點：簡單，代碼簡潔
缺點：設置overflow:hidden容易造成不會自動換行導致超出的尺寸被隱藏掉，無法顯示要溢出的元素

四、使用after偽元素常見的方法如下

.clearfix::after {
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    clear: both;
    visibility:hidden;
    font-size: 0;
 }
 
 .clearfix {
    // 注意此處是為了兼容IE6和IE7瀏覽器，即觸發hasLayout
    zoom: 1;
 }

優點：符合閉合浮動思想，結構語義化正確
缺點：代碼量多，因為IE6-7下不支持after偽元素，需要額外寫zoom:1來觸發hasLayout