css中父元素高度塌陷怎么解決

這篇“css中父元素高度塌陷怎么解決”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“css中父元素高度塌陷怎么解決”文章吧。

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

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

　　一下是舉例說明:

　　<pclass="box1">

　　<pclass="box2"></p>

　　</p>

　　<styletype="text/css">

　　.box1{

　　border:10pxredsolid;

　　}

　　.box2{

　　background-color:yellow;

　　width:100px;

　　height:100px;

　　float:left;

　　}

　　</style>

　　清除浮動詳解

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

　　清除前面兄弟元素浮動

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

　　<pclass="fl">我是左浮動元素</p>

　　<pclass="fr">我是右浮動元素</p>

　　<pclass="cb">我不受浮動元素的影響</p>

　　.fl{

　　float:left;

　　}

　　.fr{

　　float:right;

　　}

　　.cb{

　　clear:both;

　　}

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

　　demo可見：clear清除浮動

　　閉合子元素浮動

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

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

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

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

　　clear:both

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

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

　　<pclass="container">

　　<pclass="box"></p>

　　<spanclass="clear-box"></span>

　　</p>

　　.box{

　　float:left;

　　}

　　.clear-box{

　　clear:both;

　　}

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

　　<pclass="containerclearfix">

　　<pclass="box"></p>

　　</p>

　　.clearfix::after{

　　content:"";

　　display:table;

　　clear:both;

　　}

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

　　新建BFC

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

以上就是關于“css中父元素高度塌陷怎么解決”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。