關(guān)于浮動float

Noodles 發(fā)布于2019-08-30 12:59 / 3538人閱讀

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

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

    .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;
    }

清除浮動的方法：

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

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

方法一：在浮動的元素后添加一個帶有clear屬性的塊狀元素。

    .clear{
        clear:both;
    }

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

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

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

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

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

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

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

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

相關(guān)文章

關(guān)于浮動float

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

ivydom 2019-08-01 15:14 評論0 收藏0
Css清除浮動的方法總結(jié)

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

LeanCloud 2019-08-30 11:20 評論0 收藏0
重塑你的CSS世界觀——浮動魔鬼float

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

joyqi 2019-08-30 15:55 評論0 收藏0
重塑你的CSS世界觀——浮動魔鬼float

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

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

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

seanlook 2019-04-23 11:43 評論0 收藏0