css清除浮動float的兼容性方法

這次帶給大家css清除浮動float的兼容性方法，css清除浮動float相容性方法的注意事項有哪些，下面就是實戰案例，一起來看一下。

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

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

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

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

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

1、clear清除浮動（新增空p法）

在浮動元素下方加入空p,並給該元素寫css樣式：

 {clear:both;height:0;overflow:hidden;}

2、方法：給浮動元素父級設定高度

我們知道了高度塌陷是應為給浮動元素的父級高度是自適應導致的，那麼我們給它的設定適當的高度就可以解決這個問題了。

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

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

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

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

4、方法：父級設定成inline-block

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

5、 br 清浮動

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

br 標籤自帶clear屬性，將它設定成both其實和加入空p原理是一樣的。

問題：不符合工作中：結構、樣式、行為，三者分離的要求。

6、為父級添加overflow:hidden 清浮動方法；

問題：需要配合寬度或zoom 相容IE6 IE7;

overflow: hidden;
*zoom: 1;

7、萬能清除法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 不支援；

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

focus-within的使用詳解

#偽元素::before與::after使用詳解

#

以上是css清除浮動float的兼容性方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！