本文將為大家詳細介紹“如何解決css中高度塌陷的問題”，內容步驟清晰詳細，細節處理妥當，而小編每天都會更新不同的知識點，希望這篇“如何解決css中高度塌陷的問題”能夠給你意想不到的收獲，請大家跟著小編的思路慢慢深入，具體內容如下，一起去收獲新知識吧。

創新互聯擁有十多年成都網站建設工作經驗,為各大企業提供網站建設、網站制作服務，對于網頁設計、PC網站建設（電腦版網站建設）、app軟件開發公司、wap網站建設（手機版網站建設）、程序開發、網站優化（SEO優化）、微網站、國際域名空間等，憑借多年來在互聯網的打拼，我們在互聯網網站建設行業積累了很多網站制作、網站設計、網絡營銷經驗，集策劃、開發、設計、營銷、管理等網站化運作于一體，具備承接各種規模類型的網站建設項目的能力。

css是什么意思

css是一種用來表現HTML或XML等文件樣式的計算機語言，主要是用來設計網頁的樣式，使網頁更加美化。它也是一種定義樣式結構如字體、顏色、位置等的語言，并且css樣式可以直接存儲于HTML網頁或者單獨的樣式單文件中，而樣式規則的優先級由css根據這個層次結構決定，從而實現級聯效果，發展至今，css不僅能裝飾網頁，也可以配合各種腳本對于網頁進行格式化。

在文檔流中，父元素的高度默認是被子元素撐開的，也就是子元素多高，父元素就多高。但是當子元素設置浮動之后，子元素會完全脫離文檔流，此時將會導致子元素無法撐起父元素的高度，導致父元素的高度塌陷。

如果父元素只包含浮動元素，且父元素未設置高度和寬度，那么它的高度就會塌縮為零，也就是所謂的“高度塌陷”。

如果父級元素包含背景或者邊框，那么溢出的元素就不像父級元素的一部分了。

解決“高度塌陷”問題的方法：

方案一：給父元素一個固定的高度

缺點：給父元素固定高度違背了高度自適應的原則，不夠靈活，不推薦使用。

方案二：給父元素添加屬性 overflow: hidden;

優點：瀏覽器支持好，簡單；

缺點：當子元素有定位屬性時，設置 overflow: hidden; 容器以外的部分會被裁剪掉。

方案三：在子元素的末尾添加一個空的 p ，并設置下方樣式

div{
clear: both;
height: 0;
overflow: hidden;
}

優點：所有瀏覽器都支持，并且容器溢出不會被裁剪；
缺點：在頁面中添加無意義的div，容易造成代碼冗余。

方案四：萬能清除浮動法

在父元素中內容的最后添加一個偽元素來實現第三種方案的功能，具體設置樣式如下：

父元素:

after{
content: "";
height: 0;
    clear: both;
display: block;
}

優點：不會造成代碼冗余，剩余代碼性能優化，推薦使用。

如果你能讀到這里，小編希望你對“如何解決css中高度塌陷的問題”這一關鍵問題有了從實踐層面最深刻的體會，具體使用情況還需要大家自己動手實踐使用過才能領會，如果想閱讀更多相關內容的文章，歡迎關注創新互聯行業資訊頻道！

分享標題：如何解決css中高度塌陷的問題-創新互聯
網頁路徑：http://m.jcarcd.cn/article/djpjdh.html