HTML中浮動(dòng)元素float使其父元素高度塌陷的示例分析

這篇文章主要介紹HTML中浮動(dòng)元素float使其父元素高度塌陷的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

浮動(dòng)元素使其父元素高度塌陷我們經(jīng)常會(huì)遇到一種情況，給一個(gè)元素設(shè)置浮動(dòng)之后 float:left/right;，如果該元素的父元素有背景顏色，那么會(huì)發(fā)現(xiàn)父元素的背景顏色消失了；如果父元素有一個(gè)邊框，那么浮動(dòng)元素?zé)o法將邊框撐開。

從以上兩張圖中可以看出添加浮動(dòng)元素后，li元素按照規(guī)則橫向排列，但是父元素卻消失不見了。

為父元素添加一個(gè)5px的邊框，在li元素添加浮動(dòng)后，邊框并沒有被內(nèi)容撐開。

在第一個(gè)示例中仿佛父元素消失了，但在第二個(gè)示例中發(fā)現(xiàn)其實(shí)父元素并沒有消失，只是高度被計(jì)算為0。這就要回到浮動(dòng)元素的特性來(lái)說(shuō)明此問題“當(dāng)元素設(shè)置浮動(dòng)后，會(huì)自動(dòng)脫離文檔流”，翻譯成白話就是說(shuō)，元素浮動(dòng)后，就不在整個(gè)文檔流的管轄范圍，那么它之前存在在父元素內(nèi)的高度就隨著浮動(dòng)不復(fù)存在了，而此時(shí)父元素會(huì)默認(rèn)自己里面沒有任何內(nèi)容（前提是未給父元素設(shè)置固定高度，如果父元素本身有固定高度，就不會(huì)出現(xiàn)這種情況）

解決方法：

1、給父元素也添加float。這樣讓父元素與子元素一起脫離文檔流浮動(dòng)起來(lái)，保證子元素在父元素內(nèi)，這樣父元素就能自適應(yīng)子元素的高度，但是此方法有一弊端，一定會(huì)影響父元素之后的元素排列，甚至影響布局。
2、給父元素一個(gè)固定高度，此方法適用于子元素高度已知并且固定的情況。
3、添加一個(gè)塊級(jí)元素，并給此元素設(shè)置clear:both;清除浮動(dòng)。在很早之前用的就是這種解決辦法，新建一個(gè)空的div，為這個(gè)div設(shè)置clear：both；這樣無(wú)疑是增加了無(wú)意義的標(biāo)簽，一個(gè)大型頁(yè)面中，這種標(biāo)簽太多是不好的。
4、給父元素添加 overflow：hidden；【后有詳解】
5、通過偽類::after清除浮動(dòng) 【后有詳解】

overflow:hidden;

• 隱藏溢出，當(dāng)內(nèi)容超過其父元素時(shí)，可以使用該屬性和值將溢出的部分裁剪掉，使頁(yè)面更加美觀

• 清除浮動(dòng)，當(dāng)子元素浮動(dòng)時(shí)，給父元素添加overflow：hidden，按照它的第一個(gè)特性，應(yīng)該將子元素超出的部分截掉，但是因?yàn)樽釉赜懈?dòng)，無(wú)法裁剪，所有只能由父元素增加高度去包裹住子元素，使得父元素?fù)碛辛烁叨?，而這個(gè)高度是跟隨子元素自適應(yīng)的高度，這樣就把浮動(dòng)的子元素包含在父元素內(nèi)了。

::after 偽類

利用偽類來(lái)清楚浮動(dòng)，其效果跟創(chuàng)建一個(gè)空的div并設(shè)置其為clear：both；是一樣的，只不過這里用偽類代替了空的div元素

<div class="box">
    <div class="son">我是浮動(dòng)的子元素</div>
</div>

.box {
    width:400px;
    background:#F00;
}
.son {
    float:left;
}
.son::after {
    content:"";
    clear:both;/*清除浮動(dòng)*/
    display:block;/*確保該元素是一個(gè)塊級(jí)元素*/
}

html是什么

html的全稱為超文本標(biāo)記語(yǔ)言，它是一種標(biāo)記語(yǔ)言，包含了一系列標(biāo)簽．通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體，html文本是由html命令組成的描述性文本，html命令可以說(shuō)明文字，圖形、動(dòng)畫、聲音、表格、鏈接等，主要和css+js配合使用并構(gòu)建優(yōu)雅的前端網(wǎng)頁(yè)。

以上是“HTML中浮動(dòng)元素float使其父元素高度塌陷的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！