前端學習筆記之css清除浮動float的七種經常使用方法總結和兼容性處理

 

在清除浮動前咱們要了解兩個重要的定義：

浮動的定義：使元素脫離文檔流，按照指定方向發生移動，遇到父級邊界或者相鄰的浮動元素停了下來。

高度塌陷：浮動元素父元素高度自適應（父元素不寫高度時，子元素寫了浮動後，父元素會發生高度塌陷）

知道浮動和爲何要清除浮動以後咱們能夠開始學習如何清除浮動了，這時候咱們就須要用到清除浮動的屬性clear,
clear:left | right | both | none | inherit：元素的某個方向上不能有浮動元素
clear:both：在左右兩側均不容許浮動元素。

 

具體清楚浮動的方法主要一下幾種：

一、clear清除浮動（添加空div法）

# 在浮動元素下方添加空div,並給該元素寫css樣式：   {clear:both;height:0;overflow:hidden;}

 

 

二、方法：給浮動元素父級設置高度

# 咱們知道了高度塌陷是應爲給浮動元素的父級高度是自適應致使的，那麼咱們給它的設置適當的高度就能夠解決這個問題了。

# 缺點：在浮動元素高度不肯定的時候不適用

 

 

三、方法：以浮制浮（父級同時浮動）

# 何謂「以浮制浮」呢？就是**讓浮動元素的父級也浮動**。

# 缺點：須要給每一個浮動元素父級添加浮動，浮動多了容易出現問題。

 

 

四、方法：父級設置成inline-block

# 缺點：父級的margin左右auto失效，沒法使用margin: 0 auto;居中了

 

 

五、 br 清浮動

<div class="box">
    <div class="top"></div>
    <br clear="both" />
</div>

 

br 標籤自帶clear屬性，將它設置成both其實和添加空div原理是同樣的。
問題：不符合工做中：結構、樣式、行爲，三者分離的要求。

 

 

六、給父級添加overflow:hidden 清浮動方法；

# 問題：須要配合 寬度 或者 zoom 兼容IE6 IE7；
 

overflow: hidden;
*zoom: 1;

 

 

七、萬能清除法 after僞類 清浮動（如今主流方法，推薦使用）

選擇符:after{
            content:".";
            clear:both;
            display:block;
            height:0;
            overflow:hidden;
            visibility:hidden;
              }

 

同時爲了兼容 IE6，7 一樣須要配合zoom使用例如：

.clear:after{content:'';display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}
.clear{zoom:1;}

 

須要注意的東西：

after僞類： 元素內部末尾添加內容；
    :after{content"添加的內容";} IE6，7下不兼容

zoom 縮放 
    a、觸發 IE下 haslayout，使元素根據自身內容計算寬高。
    b、FF 不支持；

 

參考