這篇文章將為大家詳細(xì)講解有關(guān)css中什么是父元素高度塌陷，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

10余年的八步網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都全網(wǎng)營銷的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整八步建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“八步網(wǎng)站設(shè)計(jì)”,“八步網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

首先得回答什么是父元素高度塌陷：

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

一下是舉例說明:

清除浮動(dòng)詳解

清除浮動(dòng)主要是為了解決由于浮動(dòng)元素脫離文流導(dǎo)致的元素重疊或者父元素高度坍塌的問題，而這兩個(gè)問題分別對應(yīng)了需要清除浮動(dòng)的兩種種情況：清除前面兄弟元素浮動(dòng)和閉合子元素浮動(dòng)（解決父元素高度坍塌）。

清除前面兄弟元素浮動(dòng)

清除前面兄弟元素浮動(dòng)很簡單，只需要在不想受到浮動(dòng)元素影響的元素上使用 clear:both 即可， HTML & CSS 代碼如下：

我是左浮動(dòng)元素
我是右浮動(dòng)元素
我不受浮動(dòng)元素的影響

.fl {
    float: left;
}
.fr {
    float: right;
}
.cb {
    clear: both;
}

在 CSS2 以前，clear 的原理為自動(dòng)增加元素的上外邊距（margin-top）值，使之最后落在浮動(dòng)元素的下面。在 CSS2.1 中引入了一個(gè)清除區(qū)域（clearance）——在元素上外邊距之上增加的額外間距，使之最后落在浮動(dòng)元素的下面。所以如果需要設(shè)置浮動(dòng)元素與 clear 元素的間距，得設(shè)置浮動(dòng)的元素的 margin-bottom，而不是 clear 元素的 margin-top。

demo 可見：clear 清除浮動(dòng)

閉合子元素浮動(dòng)

我們知道，在計(jì)算頁面排版的時(shí)候，如果沒有設(shè)置父元素的高度，那么該父元素的高度是由他的子元素高度撐開的。但是如果子元素是設(shè)置了浮動(dòng)，脫離了文檔流，那么父元素計(jì)算高度的時(shí)候就會忽略該子元素，甚至當(dāng)所有子元素都是浮動(dòng)的時(shí)候，就會出現(xiàn)父元素高度為 0 的情況，這就是所謂的父元素高度坍塌問題。為了能讓父元素正確包裹子元素的高度，不發(fā)生坍塌，我們需要閉合子元素的浮動(dòng)。

一般我們有兩種辦法可以用來閉合子元素浮動(dòng)：

• 給最后一個(gè)元素設(shè)置 clear: both

• 給父元素新建一個(gè) BFC(塊格式化上下文)

clear:both

由于我們最后一個(gè)元素使用 clear:both，所以該元素就能不受浮動(dòng)元素影響出現(xiàn)在父元素的最底部，而父元素計(jì)算高度的時(shí)候需要考慮到這個(gè)正常元素的位置，所以高度自然包裹到了最底部，也就沒有了坍塌。

對于這個(gè)方法，以前我們是利用新增一個(gè)空元素（ 或 或

等）來實(shí)現(xiàn)的，如下：

.box {
    float: left;
}
.clear-box {
    clear: both;
}

雖然這種辦法比較直觀，但是不是很優(yōu)雅，因?yàn)樵黾恿艘粋€(gè)無用的空白標(biāo)簽，比較冗余而且不方便后期維護(hù)（一般不太建議使用該辦法）。所以后期有了通過父元素的偽元素（::after）實(shí)現(xiàn)的著名 clearfix 方法，代碼如下：

.clearfix::after {
    content:"";
    display:table;
    clear: both;
}

上面方法給父元素增加一個(gè)專門用于處理閉合子元素浮動(dòng)的 clearfix 類名，該類使用 ::after 偽元素類選擇器增加一個(gè)內(nèi)容為空的結(jié)構(gòu)來清除浮動(dòng)，可能你們比較疑惑的是為什么要設(shè)置 display:table 屬性，這其實(shí)涉及到一個(gè)比較復(fù)雜的進(jìn)化過程，具體可以參考資料——clearfix浮動(dòng)進(jìn)化史

新建 BFC

該方法的原理是：父元素在新建一個(gè) BFC 時(shí)，其高度計(jì)算時(shí)會把浮動(dòng)子元素的包進(jìn)來。

下面我們以實(shí)例為證：如下圖我們的圖片為浮動(dòng)，父元素 article 的高度就出現(xiàn)了坍塌（沒有包括圖片），而根元素 HTML （默認(rèn)情況下我們的根元素 HTML 就是一個(gè) BFC）的高度則包括了圖片的高度。

既然新建一個(gè) BFC 可以解決父元素高度坍陷問題，那就好辦了，下面這些都可以創(chuàng)建一個(gè) BFC ：

• 根元素或其它包含它的元素

• 浮動(dòng) (元素的 float 不是 none)

• 絕對定位的元素 (元素具有 position 為 absolute 或 fixed)

• 內(nèi)聯(lián)塊 inline-blocks (元素具有 display: inline-block)

• 表格單元格 (元素具有 display: table-cell，HTML表格單元格默認(rèn)屬性)

• 表格標(biāo)題 (元素具有 display: table-caption, HTML表格標(biāo)題默認(rèn)屬性)

• 塊元素具有overflow ，且值不是 visible

• display: flow-root

雖然有這么多方法可用，可我們常用的就是 overflow: hidden，代碼如下：

.container {
    overflow: hidden;
}
.box {
    float: left;
}

關(guān)于css中什么是父元素高度塌陷就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。