css清除浮動(dòng)各種方法：

ztyzz 發(fā)布于2019-08-28 17:59 / 1623人閱讀

摘要：在和中給浮動(dòng)塊添加來讓浮動(dòng)塊撐高并正常影響文檔流。使用偽類來提供浮動(dòng)塊后的。其實(shí)他是來用處理邊折疊的，跟清理浮動(dòng)沒有多大的關(guān)系。

1，在浮動(dòng)元素后面增加
標(biāo)簽；

　　
標(biāo)簽有自帶的清除浮動(dòng)屬性；

2，在浮動(dòng)元素后面增加一個(gè)清除浮動(dòng)層；

3,給浮動(dòng)元素添加overflow:auto樣式；

4，為最后浮動(dòng)元素設(shè)置如下樣式：

    /* 清理浮動(dòng) */
    .clearfix:after {
     visibility:hidden;
     display:block;
     font-size:0;
     content:" ";
     clear:both;
     height:0;
    }
    .clearfix {
     zoom:1;
    }

其原理是，在「高級(jí)」瀏覽器中使用 :after 偽類在浮動(dòng)塊后面加上一個(gè)非 display:none 的不可見塊狀內(nèi)容來，并給它設(shè)置 clear:both 來清理浮動(dòng)。在 ie6 和 7 中給浮動(dòng)塊添加 haslayout 來讓浮動(dòng)塊撐高并正常影響文檔流。

5，另一種簡(jiǎn)潔的辦法：

    .cf:before, .cf:after {
        content:"";
        display:table;
    }
    .cf:after {
        clear:both;
    }
    .cf {
        zoom:1;
    }

原理還是一樣的。使用 :after 偽類來提供浮動(dòng)塊后的 clear:both。不同的是，隱藏這個(gè)空白使用的是 display: table。而不是設(shè)置 visibility:hidden;height:0;font-size:0; 這樣的 hack。

值得注意的是這里中的 :before 偽類。其實(shí)他是來用處理 top-margin 邊折疊的，跟清理浮動(dòng)沒有多大的關(guān)系。但因?yàn)楦?dòng)會(huì)創(chuàng)建 block formatting context，這樣浮動(dòng)元素上的另而一元素上如果剛好有 margin-bottom 而這個(gè)浮動(dòng)元素剛好有margin-top 的話，應(yīng)該讓他們不折疊（雖然這種情況并不常見）。

云服務(wù)器 GPU云服務(wù)器清除浮動(dòng) 浮動(dòng)-前端-css 的清除方法 html浮動(dòng)向上浮動(dòng)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/110933.html

相關(guān)文章

CSS 布局經(jīng)典問題初步整理

摘要：布局經(jīng)典問題初步整理標(biāo)簽前端本文主要對(duì)布局中常見的經(jīng)典問題進(jìn)行簡(jiǎn)單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù)，清除浮動(dòng)，居中布局，響應(yīng)式設(shè)計(jì)，布局，等等。 CSS 布局經(jīng)典問題初步整理標(biāo)簽：前端 [TOC] 本文主要對(duì) CSS 布局中常見的經(jīng)典問題進(jìn)行簡(jiǎn)單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù) margin，清除浮動(dòng)，居中布局，響應(yīng)式設(shè)計(jì)，F(xiàn)l...

Amos 2019-08-29 12:36 評(píng)論0 收藏0
幾種有效的清除浮動(dòng)的方法

摘要：浮動(dòng)是布局中最常用的屬性，然而浮動(dòng)是脫離文檔流的，如果不清除浮動(dòng)的話，會(huì)對(duì)周圍的元素產(chǎn)生影響。也正是浮動(dòng)脫離文檔流這一特性，使浮動(dòng)成為布局的難點(diǎn)之一浮動(dòng)框可以左右移動(dòng)，直到它的外邊緣碰到包含框或另一浮動(dòng)框的邊緣。浮動(dòng)是CSS布局中最常用的屬性，然而浮動(dòng)是脫離文檔流的，如果不清除浮動(dòng)的話，會(huì)對(duì)周圍的元素產(chǎn)生影響。也正是浮動(dòng)脫離文檔流這一特性，使浮動(dòng)成為CSS布局的難點(diǎn)之一浮動(dòng)框可以左右...

hss01248 2019-08-29 11:33 評(píng)論0 收藏0
幾種有效的清除浮動(dòng)的方法

摘要：浮動(dòng)是布局中最常用的屬性，然而浮動(dòng)是脫離文檔流的，如果不清除浮動(dòng)的話，會(huì)對(duì)周圍的元素產(chǎn)生影響。也正是浮動(dòng)脫離文檔流這一特性，使浮動(dòng)成為布局的難點(diǎn)之一浮動(dòng)框可以左右移動(dòng)，直到它的外邊緣碰到包含框或另一浮動(dòng)框的邊緣。浮動(dòng)是CSS布局中最常用的屬性，然而浮動(dòng)是脫離文檔流的，如果不清除浮動(dòng)的話，會(huì)對(duì)周圍的元素產(chǎn)生影響。也正是浮動(dòng)脫離文檔流這一特性，使浮動(dòng)成為CSS布局的難點(diǎn)之一浮動(dòng)框可以左右...

張金寶 2019-08-01 15:59 評(píng)論0 收藏0
css常見的各種布局上（兩列布局）

摘要：目錄一大結(jié)構(gòu)上的導(dǎo)航欄和內(nèi)容區(qū)域兩欄布局博客園為例騰訊課堂個(gè)人中心頁(yè)慕課網(wǎng)個(gè)人中心頁(yè)個(gè)人中心頁(yè)二版的結(jié)構(gòu)三類似九宮格布局的兩列結(jié)構(gòu)四圖文兩列布局左圖右文字非垂直居中，左圖，右固定行數(shù)的文字，右側(cè)文字和左邊圖片垂直居中。目錄：一、大結(jié)構(gòu)上的導(dǎo)航欄和內(nèi)容區(qū)域兩欄布局1、博客園為例2、騰訊課堂個(gè)人中心頁(yè)3、慕課網(wǎng)個(gè)人中心頁(yè)4、github個(gè)人中心頁(yè)二、mini版的nav+cont結(jié)構(gòu)三、類似九宮格...

番茄西紅柿 2019-04-23 11:40 評(píng)論0 收藏0
淺談 CSS 清除浮動(dòng)的 6 種方法

摘要：如果要解決可以參考前面的辦法。例如父元素處于絕對(duì)定位與上一個(gè)方法同理，由于絕對(duì)定位已脫離正常文檔流，故出現(xiàn)相同情況，解決辦法依舊可以使用以上辦法結(jié)合，靈活多變。額外標(biāo)簽法使用:after 偽元素給父元素定高利用overflow:hidden;屬性父元素浮動(dòng) 父元素處于絕對(duì)定位在開發(fā)網(wǎng)頁(yè)的時(shí)候經(jīng)常需要用到各種浮動(dòng)，此時(shí)便需要及時(shí)的清除浮動(dòng)，否則將會(huì)導(dǎo)致布局出現(xiàn)問題引出問...

WalkerXu 2019-08-28 18:20 評(píng)論0 收藏0