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規則，大家在實際操作的時候可以針對不同的情況參考上面的方法。