如何解決css中高度塌陷的問題

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

css是什么意思

css是一種用來表現(xiàn)HTML或XML等文件樣式的計算機(jī)語言，主要是用來設(shè)計網(wǎng)頁的樣式，使網(wǎng)頁更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語言，并且css樣式可以直接存儲于HTML網(wǎng)頁或者單獨的樣式單文件中，而樣式規(guī)則的優(yōu)先級由css根據(jù)這個層次結(jié)構(gòu)決定，從而實現(xiàn)級聯(lián)效果，發(fā)展至今，css不僅能裝飾網(wǎng)頁，也可以配合各種腳本對于網(wǎng)頁進(jìn)行格式化。

在文檔流中，父元素的高度默認(rèn)是被子元素?fù)伍_的，也就是子元素多高，父元素就多高。但是當(dāng)子元素設(shè)置浮動之后，子元素會完全脫離文檔流，此時將會導(dǎo)致子元素?zé)o法撐起父元素的高度，導(dǎo)致父元素的高度塌陷。

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

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

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

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

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

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

優(yōu)點：瀏覽器支持好，簡單；

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

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

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

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

方案四：萬能清除浮動法

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

父元素:

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

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

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