css如何清除浮動(dòng)float

這篇文章主要介紹了css如何清除浮動(dòng)float，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

在清除浮動(dòng)前我們要了解兩個(gè)重要的定義：

浮動(dòng)的定義：使元素脫離文檔流，按照指定方向發(fā)生移動(dòng)，遇到父級(jí)邊界或者相鄰的浮動(dòng)元素停了下來(lái)。

高度塌陷：浮動(dòng)元素父元素高度自適應(yīng)（父元素不寫(xiě)高度時(shí)，子元素寫(xiě)了浮動(dòng)后，父元素會(huì)發(fā)生高度塌陷）

知道浮動(dòng)和為什么要清除浮動(dòng)之后我們可以開(kāi)始學(xué)習(xí)如何清除浮動(dòng)了，這時(shí)候我們就需要用到清除浮動(dòng)的屬性clear,
clear:left | right | both | none | inherit：元素的某個(gè)方向上不能有浮動(dòng)元素
clear:both：在左右兩側(cè)均不允許浮動(dòng)元素。

具體清楚浮動(dòng)的方法主要一下幾種：

1、clear清除浮動(dòng)（添加空div法）

在浮動(dòng)元素下方添加空div,并給該元素寫(xiě)css樣式：

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

2、方法：給浮動(dòng)元素父級(jí)設(shè)置高度

我們知道了高度塌陷是應(yīng)為給浮動(dòng)元素的父級(jí)高度是自適應(yīng)導(dǎo)致的，那么我們給它的設(shè)置適當(dāng)?shù)母叨染涂梢越鉀Q這個(gè)問(wèn)題了。

缺點(diǎn)：在浮動(dòng)元素高度不確定的時(shí)候不適用

3、方法：以浮制浮（父級(jí)同時(shí)浮動(dòng)）

何謂“以浮制浮”呢？就是**讓浮動(dòng)元素的父級(jí)也浮動(dòng)**。

缺點(diǎn)：需要給每個(gè)浮動(dòng)元素父級(jí)添加浮動(dòng)，浮動(dòng)多了容易出現(xiàn)問(wèn)題。

4、方法：父級(jí)設(shè)置成inline-block

 缺點(diǎn)：父級(jí)的margin左右auto失效，無(wú)法使用margin: 0 auto;居中了

5、 br 清浮動(dòng)

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

br 標(biāo)簽自帶clear屬性，將它設(shè)置成both其實(shí)和添加空div原理是一樣的。

問(wèn)題：不符合工作中：結(jié)構(gòu)、樣式、行為，三者分離的要求。

6、給父級(jí)添加overflow:hidden 清浮動(dòng)方法；

問(wèn)題：需要配合 寬度 或者 zoom 兼容IE6 IE7；

overflow: hidden;
*zoom: 1;

7、萬(wàn)能清除法 after偽類 清浮動(dòng)（現(xiàn)在主流方法，推薦使用）

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

同時(shí)為了兼容 IE6，7 同樣需要配合zoom使用例如：

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

需要注意的東西：

after偽類： 元素內(nèi)部末尾添加內(nèi)容；

:after{content"添加的內(nèi)容";} IE6，7下不兼容

zoom 縮放 

    a、觸發(fā) IE下 haslayout，使元素根據(jù)自身內(nèi)容計(jì)算寬高。   b、FF 不支持；

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“css如何清除浮動(dòng)float”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!