關(guān)于浮動(dòng)float

ivydom 發(fā)布于2019-08-01 15:14 / 3036人閱讀

摘要：浮動(dòng)的框可以左右移動(dòng)即，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊緣。屬性的值可以是或，它表示框的哪些邊不應(yīng)該挨著浮動(dòng)框。在清理元素時(shí)，瀏覽器在元素添加足夠的外邊距，使元素的頂邊緣垂直下降到浮動(dòng)框下面。

眾所周知，浮動(dòng)模型是一種可視化格式模型。浮動(dòng)的框可以左右移動(dòng)（即：float：left;float:right），直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊緣。浮動(dòng)框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在似的。

    .wrapper{
        border:5px solid #000;
        /*height:300px;*/
    }
    ul{
        margin:0;
        padding:0;
        /*height:300px;*/
        border:1px solid #f00;
        /*float:left;*/
    }
    li{
        float:left;
        height:100px;
        list-style:none;
        padding:5px 10px;
    }

清除浮動(dòng)的方法：

要想阻止行框圍繞在浮動(dòng)框的外邊，需要對(duì)包含這些行框的元素應(yīng)用clear屬性。clear屬性的值可以是left、right、both或none，它表示框的哪些邊不應(yīng)該挨著浮動(dòng)框。在清理元素時(shí)，瀏覽器在元素添加足夠的外邊距，使元素的頂邊緣垂直下降到浮動(dòng)框下面。

浮動(dòng)元素脫離了文檔流，不影響周圍的元素。但是，對(duì)元素進(jìn)行清理實(shí)際上為前面的浮動(dòng)元素留出了垂直空間。

方法一：在浮動(dòng)的元素后添加一個(gè)帶有clear屬性的塊狀元素。

    .clear{
        clear:both;
    }

這會(huì)實(shí)現(xiàn)我們希望的效果，但是要添加不必要的代碼，沒有意義的標(biāo)簽代碼。

方法二：使用偽類選擇器:after

方法三：利用overflow:hidden或auto的副作用，會(huì)自動(dòng)地清理抱恨的任何浮動(dòng)元素。在浮動(dòng)的父塊狀元素設(shè)置屬性overflow:hidden或auto;

這是一種有用的元素清理方法，不需要添加額外的標(biāo)記。這個(gè)方法并不適合所有情況，因?yàn)樵O(shè)置框的overflow會(huì)影響它的表現(xiàn)。更具體地說，這種方法在某些情況下回產(chǎn)生滾動(dòng)條或者截?cái)鄡?nèi)容。

方法四：如果子元素內(nèi)容固定，可以對(duì)父級(jí)元素設(shè)置合適的高度。

GPU云服務(wù)器云服務(wù)器 Floats Floating float float:left

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

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

相關(guān)文章

關(guān)于浮動(dòng)float

摘要：浮動(dòng)的框可以左右移動(dòng)即，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊緣。屬性的值可以是或，它表示框的哪些邊不應(yīng)該挨著浮動(dòng)框。在清理元素時(shí)，瀏覽器在元素添加足夠的外邊距，使元素的頂邊緣垂直下降到浮動(dòng)框下面。眾所周知，浮動(dòng)模型是一種可視化格式模型。浮動(dòng)的框可以左右移動(dòng)（即：float：left;float:right），直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊緣。浮動(dòng)框不在文檔的普通流中...

Noodles 2019-08-30 12:59 評(píng)論0 收藏0
Css清除浮動(dòng)的方法總結(jié)

摘要：網(wǎng)頁布局中經(jīng)常會(huì)用到浮動(dòng)，但是浮動(dòng)的塊級(jí)元素脫離了標(biāo)準(zhǔn)文檔流，使得浮動(dòng)元素的父元素沒有高度，導(dǎo)致父級(jí)元素沒有高度，所以需要清除浮動(dòng)對(duì)父級(jí)元素的影響，本文介紹清除浮動(dòng)的幾種方法。網(wǎng)頁布局中經(jīng)常會(huì)用到float浮動(dòng)，但是浮動(dòng)的塊級(jí)元素脫離了標(biāo)準(zhǔn)文檔流，使得浮動(dòng)元素的父元素沒有高度，導(dǎo)致父級(jí)元素沒有高度，所以需要清除浮動(dòng)對(duì)父級(jí)元素的影響，本文介紹清除浮動(dòng)的幾種方法。清除浮動(dòng)影響的幾種方法...

LeanCloud 2019-08-30 11:20 評(píng)論0 收藏0
重塑你的CSS世界觀——浮動(dòng)魔鬼float

摘要：而在文檔流中，如果浮動(dòng)元素和跟隨元素都是元素，它們兩在默認(rèn)情況下都將占據(jù)一行。而由于浮動(dòng)元素脫離了文檔流，如果父元素沒有指定高度或者其他元素?fù)纹?，也就出現(xiàn)了所謂的浮動(dòng)元素的父元素高度塌陷。為什么要寫《重塑你的CSS世界觀》系列文章由于從工作到現(xiàn)在，我的主要工作都是寫JavaScript，幾乎沒怎么碰CSS，通常都是別人寫好界面，然后我來開發(fā)JavaScript邏輯代碼，這導(dǎo)致了嚴(yán)重...

joyqi 2019-08-30 15:55 評(píng)論0 收藏0
重塑你的CSS世界觀——浮動(dòng)魔鬼float

摘要：而在文檔流中，如果浮動(dòng)元素和跟隨元素都是元素，它們兩在默認(rèn)情況下都將占據(jù)一行。而由于浮動(dòng)元素脫離了文檔流，如果父元素沒有指定高度或者其他元素?fù)纹?，也就出現(xiàn)了所謂的浮動(dòng)元素的父元素高度塌陷。為什么要寫《重塑你的CSS世界觀》系列文章由于從工作到現(xiàn)在，我的主要工作都是寫JavaScript，幾乎沒怎么碰CSS，通常都是別人寫好界面，然后我來開發(fā)JavaScript邏輯代碼，這導(dǎo)致了嚴(yán)重...

frank_fun 2019-08-02 14:24 評(píng)論0 收藏0
關(guān)于css兼容性問題及一些常見問題匯總

摘要：解決辦法添加復(fù)制內(nèi)容到剪貼板一行右側(cè)第一個(gè)元素有雙邊距一行左側(cè)第一個(gè)元素有雙邊距在，下，自身沒浮動(dòng)，但是的內(nèi)容有浮動(dòng)，下邊就會(huì)產(chǎn)生一個(gè)間隙解決辦法給加浮動(dòng)給加注意當(dāng)下最小高度問題，和的間隙問題共存的時(shí)候，給加浮動(dòng)才能解決。目前主流瀏覽器的兼容性做的都比較好了，本文主要針對(duì)IE6，7的不兼容問題進(jìn)行解決。 1.圓盤時(shí)鐘有浮動(dòng)存在時(shí)，計(jì)算一定要精確，不要讓內(nèi)容的寬高超出我們所設(shè)置的寬高，IE6下...

seanlook 2019-04-23 11:43 評(píng)論0 收藏0