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

創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比溫州網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式溫州網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋溫州地區(qū)。費(fèi)用合理售后完善，十余年實(shí)體公司更值得信賴。

css是什么意思

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

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

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

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

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

方案一：給父元素一個(gè)固定的高度

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

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

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

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

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

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

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

方案四：萬能清除浮動(dòng)法

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

父元素:

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

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

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