成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

CSS-高度塌陷問題

Vultr / 1982人閱讀

摘要：可以得出產(chǎn)生高度塌陷的原因在文檔流中，父元素的高度默認(rèn)是被子元素?fù)伍_的，也就是子元素多高，父元素就多高。但是當(dāng)為子元素設(shè)置浮動(dòng)以后，子元素會(huì)完全脫離文檔流，此時(shí)將會(huì)導(dǎo)致子元素?zé)o法撐起父元素的高度，導(dǎo)致父元素的高度塌陷。

目錄

  • CSS-高度塌陷問題
    • 表現(xiàn)
    • 產(chǎn)生的原因
    • 高度塌陷的解決辦法：
    • BFC相關(guān)

CSS-高度塌陷問題

表現(xiàn)

例如：

HTML：


    
first-child1

    
first-child2





    second




    third

CSS：

.first{
    width: 300px;
    background-color: pink;
}
.first .first-child1,.first .first-child2{
    float: left;
    width: 100px;
    height: 100px;
}
.first .first-child1{
    background-color: purple;
    margin-right: 10px;
}
.first .first-child2{
    background-color: red;  
}
.second{
    width: 200px;
    height: 150px;
    background-color: blue;
}
.third{
    width: 100px;
    height: 150px;
    background-color: green;
}

表現(xiàn)為：

產(chǎn)生的原因

由上面的例子可以看出，first盒子沒有設(shè)置高度，由子元素?fù)伍_，但是由于子盒子設(shè)置了浮動(dòng)，脫離了標(biāo)準(zhǔn)流，所以導(dǎo)致first盒子沒有高度，表現(xiàn)為second和third盒子向上移動(dòng)了。

可以得出產(chǎn)生高度塌陷的原因：

在文檔流中，父元素的高度默認(rèn)是被子元素?fù)伍_的，也就是子元素多高，父元素就多高。但是當(dāng)為子元素設(shè)置浮動(dòng)以后，子元素會(huì)完全脫離文檔流，此時(shí)將會(huì)導(dǎo)致子元素?zé)o法撐起父元素的高度，導(dǎo)致父元素的高度塌陷。由于父元素的高度塌陷了，則父元素下的所有元素都會(huì)向上移動(dòng)，這樣將會(huì)導(dǎo)致頁面布局混亂。

高度塌陷的解決辦法：

  1. 給父元素設(shè)置固定高度。但是使用這種方式后，父元素的高度就不能根據(jù)子元素自動(dòng)撐高了，可以根據(jù)自己頁面的特點(diǎn)，如果可以固定高度，可以使用這種方式，否則，不推薦這種方式。

  2. 額外標(biāo)簽法，這是w3c推薦的解決方案，但是不推薦，因?yàn)閔tml的原則是寫出語義化的標(biāo)簽，這種方式會(huì)額外增加無意義的標(biāo)簽。

    
    
    first-child1
    
    
    first-child2

  3. 父元素的overflow屬性（開啟元素的BFC）：

    .clearfix{
    overflow: hidden;
}

    使用這種方式，屬性值可以是非visible（hidden/auto/scroll）中任意，但是建議用hidden。

    這種方式副作用較小，這種方式在ie6中不支持，可以外加zoom: 1;

    .clearfix{
    overflow: hidden;
    zoom: 1;/*針對(duì)ie6*/
}

  4. 單偽元素after清除浮動(dòng)（開啟元素的BFC）：

    .clearfix::after{
    content: "";/*偽元素內(nèi)容為空*/
    display: block;/*非默認(rèn)的就行，也可以是table等等*/
    height: 0;/*偽元素高度為0，不影響其他元素*/
    clear: both;/*清除浮動(dòng)*/
    visibility: hidden;/*不可見*/
}
.clearfix{
    zoom: 1;/*ie6元素沒有BFC模式，但是這句代碼會(huì)開啟ie6中的hasLayout模式，只在ie中支持*/
}

    這種方式現(xiàn)在使用比較廣泛，很多大網(wǎng)站都是使用這種方式，副作用較小，只需要在配合處理ie6就可以了。

  5. 雙偽元素清除浮動(dòng)（開啟元素的BFC）：

.clearfix::before,.clearfix::after{
    content: "";
    display: block;
    clear: both;
}
.clearfix{
    zoom: 1;/*ie6元素沒有BFC模式，但是這句代碼會(huì)開啟ie6中的hasLayout模式，只在ie中支持*/
}

這種做法寫法比較麻煩，也不推薦。

清除浮動(dòng)對(duì)父元素的影響后的效果：

BFC相關(guān)

根據(jù)W3C的標(biāo)準(zhǔn)，在頁面中元素都一個(gè)隱含的屬性叫做Block Formatting Context，簡(jiǎn)稱BFC，該屬性可以設(shè)置打開或者關(guān)閉，默認(rèn)是關(guān)閉的。

當(dāng)開啟元素的BFC以后，元素將會(huì)具有如下的特性：

  1. 父元素的垂直外邊距不會(huì)和子元素重疊
  2. 開啟BFC的元素不會(huì)被浮動(dòng)元素所覆蓋
  3. 開啟BFC的元素可以包含浮動(dòng)的子元素

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/1407.html

相關(guān)文章

  • 理解CSS浮動(dòng)與清除浮動(dòng)

    摘要：那我們舉個(gè)栗子當(dāng)先聲明一個(gè)元素向左浮動(dòng)時(shí)，由于脫離文檔流，這個(gè)元素的右邊就會(huì)空出一片空間，空間的長(zhǎng)寬與浮動(dòng)元素長(zhǎng)寬相同?？偨Y(jié)總結(jié)下來，浮動(dòng)與清除浮動(dòng)的順序關(guān)系如下設(shè)置元素浮動(dòng)，元素脫離文檔流，不計(jì)算高度。 本文主要探討兩個(gè)問題： 為什么CSS設(shè)置浮動(dòng)會(huì)引起父元素塌陷 為什么設(shè)置clear:both能清除浮動(dòng)，并撐開父元素。 起因 CSS的浮動(dòng)，算是我在寫網(wǎng)頁時(shí)用的最多的屬性之一。但...

    劉東 評(píng)論0 收藏0

  • 導(dǎo)航條css clear清除浮動(dòng) 解決高度塌陷最終版

    摘要：講清除浮動(dòng)屬性值清除左右元素浮動(dòng)對(duì)本元素造成的影響。代碼導(dǎo)航條解決高度塌陷問題最終版利用一個(gè)占位，清除浮動(dòng)對(duì)它的影響從而實(shí)現(xiàn)解決高度塌陷的問題，但是此方法會(huì)在頁面結(jié)構(gòu)中加入一個(gè)占位標(biāo)簽，影響源碼閱讀。 63講 導(dǎo)航條css樣式 導(dǎo)航條 *{ margin:0px; padding:0px; } .nav{ /*去除每個(gè)前的大圓點(diǎn)*/ list...

    劉厚水 評(píng)論0 收藏0

  • 導(dǎo)航條css clear清除浮動(dòng) 解決高度塌陷最終版

    摘要：講清除浮動(dòng)屬性值清除左右元素浮動(dòng)對(duì)本元素造成的影響。代碼導(dǎo)航條解決高度塌陷問題最終版利用一個(gè)占位，清除浮動(dòng)對(duì)它的影響從而實(shí)現(xiàn)解決高度塌陷的問題，但是此方法會(huì)在頁面結(jié)構(gòu)中加入一個(gè)占位標(biāo)簽，影響源碼閱讀。 63講 導(dǎo)航條css樣式 導(dǎo)航條 *{ margin:0px; padding:0px; } .nav{ /*去除每個(gè)前的大圓點(diǎn)*/ list...

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

  • 【前端Talkking】CSS系列——CSS深入理解之float浮動(dòng)

    摘要：包裹性所謂包裹性，其實(shí)是由包裹和自適應(yīng)兩部分組成。官方對(duì)屬性的解釋是元素盒子的邊不能和前面的浮動(dòng)元素相鄰。清除高度塌陷的問題在上面的章節(jié)中，如果子元素設(shè)置浮動(dòng)屬性，則父元素就會(huì)出現(xiàn)高度塌陷的問題。 float屬性是CSS中常用的一個(gè)屬性，在實(shí)際工作中使用的非常多，如果使用不當(dāng)就會(huì)出現(xiàn)意料之外的效果。雖然很多人說浮動(dòng)會(huì)用就行、浮動(dòng)過時(shí)了，但是對(duì)于優(yōu)秀的前端開發(fā)人員，需要有刨根問底的精神，...

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

  • 【零基礎(chǔ)入門】css學(xué)習(xí)筆記（6） 清除浮動(dòng)

    摘要：清除浮動(dòng)，為何要清除浮動(dòng)浮動(dòng)效果會(huì)帶來不好的影響子元素浮動(dòng)會(huì)帶來父元素高度塌陷。，清除浮動(dòng)的兩大基本方式，運(yùn)用清除浮動(dòng)。元素流入頁面時(shí)，在這個(gè)元素左邊右邊或兩邊不允許有浮動(dòng)內(nèi)容。除了是用來清除浮動(dòng)的，其它代碼都是為了隱藏掉生成的內(nèi)容。 清除浮動(dòng) 1，為何要清除浮動(dòng) 浮動(dòng)效果會(huì)帶來不好的影響： 子元素浮動(dòng)會(huì)帶來父元素高度塌陷。具體解釋：當(dāng)浮動(dòng)框高度超出包含框時(shí)，包含框不會(huì) 自動(dòng)伸高 來閉...

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

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<