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

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

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

在文檔流中，父元素的高度默認是被子元素撐開的，也就是子元素多高，父元素就多高。但是當子元素設置浮動之后，子元素會完全脫離文檔流，此時將會導致子元素無法撐起父元素的高度，導致父元素的高度塌陷。

一下是舉例說明:

  <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>

清除浮動詳解

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

清除前面兄弟元素浮動

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

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

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

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

demo 可見：clear 清除浮動

閉合子元素浮動

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

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

• 給最后一個元素設置 clear: both

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

clear:both

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

對于這個方法，以前我們是利用新增一個空元素（<b> 或 <span> 或 <p> 等）來實現的，如下：

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

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

雖然這種辦法比較直觀，但是不是很優雅，因為增加了一個無用的空白標簽，比較冗余而且不方便后期維護（一般不太建議使用該辦法）。所以后期有了通過父元素的偽元素（::after）實現的著名 clearfix 方法，代碼如下：

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

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

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

新建 BFC

該方法的原理是：父元素在新建一個 BFC 時，其高度計算時會把浮動子元素的包進來。

下面我們以實例為證：如下圖我們的圖片為浮動，父元素 article 的高度就出現了坍塌（沒有包括圖片），而根元素 HTML （默認情況下我們的根元素 HTML 就是一個 BFC）的高度則包括了圖片的高度。

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

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

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

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

• 內聯塊 inline-blocks (元素具有 display: inline-block)

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

• 表格標題 (元素具有 display: table-caption, HTML表格標題默認屬性)

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

• display: flow-root

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

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

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

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