清除浮動的幾種方法

閱讀張鑫旭的文章才明白：
     浮動的原本只是讓文字環繞圖片顯示，其餘全部用浮動實現的效果其實都不該是浮動應該作的事情，因此網頁佈局方面慎用float。具體來龍去脈我就很少說了，有興趣的能夠前往其博客：

http://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E3%80%81%E8%AF%A6%E8%A7%A3%E5%8F%8A%E6%8B%93%E5%B1%95%E4%BA%8C/

我這邊僅記錄一下博客裏面介紹的清除浮動的幾種方法：

1. after + zoom 方法(通用性強，推薦)

 

.wrap{
    zoom:1;
}
.wrap:after{
    display: block;
    content: 'clear';
    clear: both;
    line-height: 0;/*也能夠寫成heihgt: 0*/
    visibility: hidden;
}

 

2. overflow + zoom 方法:

 

.father{
     overflow: hidden;
     zoom: 1;
}

 

涵蓋全部瀏覽器，可是 overflow: hidden; 有隱患，若是裏面的元素須要設置margin負值或是負的絕對定位，就會被隱藏掉。

 

3. 添加空標籤(冗餘空標籤)

 

在最後一個子標籤後面加一個 <div style="clear:both;"></div> 

 

4. 使用javascript改變css的屬性：

 

obj.style.styleFloat = "left";/*IE*/ 
obj.style.cssFloat = "left";/*其餘瀏覽器*/