溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文將為大家詳細介紹“如何解決css中高度塌陷的問題”，內容步驟清晰詳細，細節處理妥當，而小編每天都會更新不同的知識點，希望這篇“如何解決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中高度塌陷的問題”這一關鍵問題有了從實踐層面最深刻的體會，具體使用情況還需要大家自己動手實踐使用過才能領會，如果想閱讀更多相關內容的文章，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
