HTML中浮動元素float使其父元素高度塌陷的示例分析

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

浮動元素使其父元素高度塌陷我們經常會遇到一種情況，給一個元素設置浮動之后 float:left/right;，如果該元素的父元素有背景顏色，那么會發現父元素的背景顏色消失了；如果父元素有一個邊框，那么浮動元素無法將邊框撐開。

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

為父元素添加一個5px的邊框，在li元素添加浮動后，邊框并沒有被內容撐開。

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

解決方法：

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

overflow:hidden;

• 隱藏溢出，當內容超過其父元素時，可以使用該屬性和值將溢出的部分裁剪掉，使頁面更加美觀

• 清除浮動，當子元素浮動時，給父元素添加overflow：hidden，按照它的第一個特性，應該將子元素超出的部分截掉，但是因為子元素有浮動，無法裁剪，所有只能由父元素增加高度去包裹住子元素，使得父元素擁有了高度，而這個高度是跟隨子元素自適應的高度，這樣就把浮動的子元素包含在父元素內了。

::after 偽類

利用偽類來清楚浮動，其效果跟創建一個空的div并設置其為clear：both；是一樣的，只不過這里用偽類代替了空的div元素

<div class="box">
    <div class="son">我是浮動的子元素</div>
</div>

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

html是什么

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

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