css清除浮動float的七種常用方法總結

在清除浮動前我們要了解兩個重要的定義：
浮動的定義：使元素脫離文件流，按照指定方向發生移動，遇到父級邊界或者相鄰的浮動元素停了下來。
高度塌陷：浮動元素父元素高度自適應（父元素不寫高度時，子元素寫了浮動後，父元素會發生高度塌陷）

clear:left | right | both | none | inherit：元素的某個方向上不能有浮動元素
clear:both：在左右兩側均不允許浮動元素。

具體清楚浮動的方法主要一下幾種：
1、clear清除浮動（新增空div法）

在浮動元素下方新增空div,並給該元素寫css樣式：
{
    clear:both;
    height:0;
    overflow:hidden;
}
複製程式碼

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

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

缺點：在浮動元素高度不確定的時候不適用
複製程式碼

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

何謂“以浮制浮”呢？就是**讓浮動元素的父級也浮動**。

缺點：需要給每個浮動元素父級新增浮動，浮動多了容易出現問題。
複製程式碼

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

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

5、 br 清浮動

<div class="box">
    <div class="top"></div>
    <br clear="both" />
</div>
複製程式碼

br 標籤自帶clear屬性，將它設定成both其實和新增空div原理是一樣的。問題：不符合工作中：結構、樣式、行為，三者分離的要求。

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（Firefox） 不支援；
複製程式碼

css清除浮動float的七種常用方法總結

相關文章