css中什么是父元素高度塌陷

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

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

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

一下是舉例說(shuō)明:

  <p class="box1">
        <p class="box2"></p>
    </p>

<style type="text/css">     
        .box1{
            border: 10px red solid;
            }

        .box2{
            background-color: yellow;
            width: 100px;
            height: 100px;
            float: left;
            
           }
    </style>

清除浮動(dòng)詳解

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

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

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

<p class="fl">我是左浮動(dòng)元素</p>
<p class="fr">我是右浮動(dòng)元素</p>
<p class="cb">我不受浮動(dòng)元素的影響</p>

.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 可見(jiàn)：clear 清除浮動(dòng)

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

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

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

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

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

clear:both

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

對(duì)于這個(gè)方法，以前我們是利用新增一個(gè)空元素（<b> 或 <span> 或 <p> 等）來(lái)實(shí)現(xiàn)的，如下：

<p class="container">
    <p class="box"></p>
    <span class="clear-box"></span>
</p>

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

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

<p class="container clearfix">
    <p class="box"></p>
</p>

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

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

新建 BFC

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

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

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

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

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

• 絕對(duì)定位的元素 (元素具有 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，代碼如下：

<p class="container">
    <p class="box"></p>
</p>

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

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