成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

清除浮動(dòng)

antz / 1697人閱讀

摘要：清除浮動(dòng)是用于什么場(chǎng)景父元素內(nèi)部的子元素浮動(dòng)后，會(huì)造成父元素的塌陷，父元素的高度為，因而不會(huì)顯示樣式。評(píng)價(jià)這是最優(yōu)的清除浮動(dòng)的方案。

清除浮動(dòng)是用于什么場(chǎng)景？

父元素內(nèi)部的子元素浮動(dòng)后，會(huì)造成父元素的塌陷，父元素的高度為0，因而不會(huì)顯示樣式。

有時(shí)候，父級(jí)元素本來就是沒有樣式的，那么他塌陷不塌陷無所謂咯，不不不，圖森破，如果父級(jí)元素后面還有元素，由于父級(jí)元素的塌陷，他們就會(huì)上來占據(jù)父級(jí)元素的位置，效果就是，子元素覆蓋在了父級(jí)元素下面元素的上面。
所以，在需要應(yīng)用父級(jí)元素的樣式的時(shí)候，在不希望子元素覆蓋父級(jí)下一個(gè)元素的時(shí)候，要清除浮動(dòng)

讓我們來清除調(diào)皮的浮動(dòng)！ 方法一：空元素追加法

html:


    
Box 1

    
Box 2

    
Box 3

css:

.box-set{
    background-color: #e8aaa9;
}
.box {
    background: #8ec63f;
    width: 200px;
    height: 100px;
    float: left;
    margin: 10px;
    box-shadow: 20px 20px 10px #555;
}
.clean{
    clear: both;
}

我的理解：

因?yàn)榭赵氐拇嬖冢讣?jí)元素識(shí)別內(nèi)部元素整體時(shí)不再認(rèn)為是浮動(dòng)的，是有寬高的，因此并未塌陷。

不足之處：

給html加個(gè)空標(biāo)簽雖然簡(jiǎn)答有效，但它是語義化極差的，不推薦。

方法二：overflow技巧

html：


    
Box 1

    
Box 2

    
Box 3

css:

.box-set{
    background-color: #e8aaa9;
    overflow: hidden;
}
.box {
    background: #8ec63f;
    width: 200px;
    height: 100px;
    float: left;
    margin: 10px;
    box-shadow: 20px 20px 10px #555;
}

overflow做了什么？

overflow 屬性規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情。

我的理解：

overflow為父元素提供了一種檢查內(nèi)部元素的機(jī)制，在檢查的過程中，識(shí)別出了內(nèi)部的高度，父元素被撐起。

不足之處：

從效果圖上，細(xì)心的你一定發(fā)現(xiàn)了overflow技巧和追加空標(biāo)簽的差別，是的，overflow把box的陰影給截?cái)嗔?，可能是父?jí)元素并不將shadow的寬高值計(jì)入內(nèi)部總寬高中，因此忽略。很多時(shí)候我們并不希望發(fā)生這樣的事情。

方法三：clearfix技巧

html:


    
Box 1

    
Box 2

    
Box 3

css:

.box-set :before,.box-set:after{
    content:"";
    display: table;
}
.box-set:after{
    clear: both;
}
.box-set{
    background-color: #e8aaa9;
     /*在IE6和7的瀏覽器中，加上“*zoom”屬性來觸發(fā)父元素的hasLayout的機(jī)制。*/
    *zoom: 1;
}
.box {
    background: #8ec63f;
    width: 200px;
    height: 100px;
    float: left;
    margin: 10px;
    box-shadow: 20px 20px 10px #555;
}

我的理解：

在css中使用before和after實(shí)現(xiàn)了在不影響DOM結(jié)構(gòu)的情況下插入元素，彌補(bǔ)了方法一的不足，具體實(shí)現(xiàn)特性和方法一有異曲同工之處。

評(píng)價(jià)：

這是最優(yōu)的清除浮動(dòng)的方案。

參考資料：

HTML和CSS高級(jí)指南之二——定位詳解

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

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

相關(guān)文章

  • 關(guān)于浮動(dòng)與清除浮動(dòng)，你應(yīng)該知道的

    摘要：清除浮動(dòng)并不是說讓浮動(dòng)元素回到文檔流清除浮動(dòng)只會(huì)改變改元素自身的位置，并且只針對(duì)排在該元素前面的元素。 我在做頁面布局的時(shí)候，多多少少總會(huì)受到來自浮動(dòng)的困擾，因此專門通過實(shí)踐來總結(jié)一下浮動(dòng)與清除浮動(dòng)。 首先總結(jié)幾個(gè)基礎(chǔ)的概念： 浮動(dòng)：設(shè)置浮動(dòng)的元素會(huì)脫離文檔流，不會(huì)影響塊元素的布局，但是會(huì)影響內(nèi)聯(lián)元素的排列[通常是文本]； 文檔流：在文檔流中，塊元素會(huì)單個(gè)元素獨(dú)占一行 接下來我們通過實(shí)...

    mengbo 評(píng)論0 收藏0

  • 關(guān)于浮動(dòng)與清除浮動(dòng)，你應(yīng)該知道的

    摘要：清除浮動(dòng)并不是說讓浮動(dòng)元素回到文檔流清除浮動(dòng)只會(huì)改變改元素自身的位置，并且只針對(duì)排在該元素前面的元素。 我在做頁面布局的時(shí)候，多多少少總會(huì)受到來自浮動(dòng)的困擾，因此專門通過實(shí)踐來總結(jié)一下浮動(dòng)與清除浮動(dòng)。 首先總結(jié)幾個(gè)基礎(chǔ)的概念： 浮動(dòng)：設(shè)置浮動(dòng)的元素會(huì)脫離文檔流，不會(huì)影響塊元素的布局，但是會(huì)影響內(nèi)聯(lián)元素的排列[通常是文本]； 文檔流：在文檔流中，塊元素會(huì)單個(gè)元素獨(dú)占一行 接下來我們通過實(shí)...

    masturbator 評(píng)論0 收藏0

  • 關(guān)于浮動(dòng)與清除浮動(dòng)，你應(yīng)該知道的

    摘要：清除浮動(dòng)并不是說讓浮動(dòng)元素回到文檔流清除浮動(dòng)只會(huì)改變改元素自身的位置，并且只針對(duì)排在該元素前面的元素。 我在做頁面布局的時(shí)候，多多少少總會(huì)受到來自浮動(dòng)的困擾，因此專門通過實(shí)踐來總結(jié)一下浮動(dòng)與清除浮動(dòng)。 首先總結(jié)幾個(gè)基礎(chǔ)的概念： 浮動(dòng)：設(shè)置浮動(dòng)的元素會(huì)脫離文檔流，不會(huì)影響塊元素的布局，但是會(huì)影響內(nèi)聯(lián)元素的排列[通常是文本]； 文檔流：在文檔流中，塊元素會(huì)單個(gè)元素獨(dú)占一行 接下來我們通過實(shí)...

    Donald 評(píng)論0 收藏0

  • 關(guān)于浮動(dòng)與清除浮動(dòng)，你應(yīng)該知道的

    摘要：清除浮動(dòng)并不是說讓浮動(dòng)元素回到文檔流清除浮動(dòng)只會(huì)改變改元素自身的位置，并且只針對(duì)排在該元素前面的元素。 我在做頁面布局的時(shí)候，多多少少總會(huì)受到來自浮動(dòng)的困擾，因此專門通過實(shí)踐來總結(jié)一下浮動(dòng)與清除浮動(dòng)。 首先總結(jié)幾個(gè)基礎(chǔ)的概念： 浮動(dòng)：設(shè)置浮動(dòng)的元素會(huì)脫離文檔流，不會(huì)影響塊元素的布局，但是會(huì)影響內(nèi)聯(lián)元素的排列[通常是文本]； 文檔流：在文檔流中，塊元素會(huì)單個(gè)元素獨(dú)占一行 接下來我們通過實(shí)...

    ideaa 評(píng)論0 收藏0

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

    摘要：前言本文主要介紹清除浮動(dòng)的種風(fēng)方法及利弊浮動(dòng)對(duì)頁面的影響如果一個(gè)父級(jí)塊元素中的子元素浮動(dòng)，那么所有浮動(dòng)的子元素都脫離了文檔流，如果父元素?zé)o法確定高度，則其下面的兄弟元素會(huì)自動(dòng)補(bǔ)位，造成視圖結(jié)構(gòu)混亂，所以這個(gè)時(shí)候要進(jìn)行清除浮動(dòng)。 前言： 本文主要介紹清除浮動(dòng)的4種風(fēng)方法及利弊 浮動(dòng)對(duì)頁面的影響： 如果一個(gè)父級(jí)塊元素中的子元素浮動(dòng)，那么所有浮動(dòng)的子元素都脫離了文檔流，如果父元素?zé)o法確定高度...

    Alex 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<