css中父元素高度塌陷是什么意思如何解決？

1、css中父元素高度塌陷是什么意思，如何解決？首先得回答什么是父元素高度塌陷：在文檔流中，父元素的高度默認是被子元素撐開的，也就是子元素多高，父元素就多高。但是當子元素設(shè)置浮動之后，子元素會徹低脫離文檔流，此時將會導(dǎo)致子元素?zé)o法撐起父元素的高度，導(dǎo)致父元素的高度塌陷。一下是舉例解釋:.box1border:10pxredsolid;.box2background-color:yellow;width:100px;height:100px;float:left;清除浮動詳解清除浮動主要是為了解決因為浮動元素脫離文流導(dǎo)致的元素重疊或者父元素高度坍塌的問題，而這兩個問題分離對應(yīng)了需要清除浮動的兩種種狀

2、況：清除前面兄弟元素浮動和閉合子元素浮動（解決父元素高度坍塌）。清除前面兄弟元素浮動清除前面兄弟元素浮動很容易，只需要在不想受到浮動元素影響的元素上用法clear:both即可，html&css代碼如下：我是左浮動元素我是右浮動元素我不受浮動元素的影響.flfloat:left;.frfloat:right;.cbclear:both;在css2以前，clear的原理為自動增強元素的上外邊距（margin-top）值，使之最后落在浮動元素的下面。在css2.1中引入了一個清除區(qū)域（clearance）——在元素上外邊距之上增強的額外間距，

3、使之最后落在浮動元素的下面。所以假如需要設(shè)置浮動元素與clear元素的間距，得設(shè)置浮動的元素的margin-bottom，而不是clear元素的margin-top。demo可見：clear清除浮動閉合子元素浮動我們知道，在計算頁面排版的時候，假如沒有設(shè)置父元素的高度，那么該父元素的高度是由他的子元素高度撐開的。但是假如子元素是設(shè)置了浮動，脫離了文檔流，那么父元素計算高度的時候就會忽視該子元素，甚至當全部子元素都是浮動的時候，就會浮現(xiàn)父元素高度為0的狀況，這就是所謂的父元素高度坍塌問題。為了能讓父元素正確小包子元素的高度，不發(fā)生坍塌，我們需要閉合子元素的浮動。普通我們有兩種方法可以用來閉合子元

4、素浮動：給最后一個元素設(shè)置clear:both給父元素新建一個bfc(塊格式化上下文)clear:both因為我們最后一個元素用法clear:both，所以該元素就能不受浮動元素影響浮現(xiàn)在父元素的最底部，而父元素計算高度的時候需要考慮到這個正常元素的位置，所以高度自然小包到了最底部，也就沒有了坍塌。對于這個辦法，以前我們是利用新增一個空元素（或或等）來實現(xiàn)的，如下：.boxfloat:left;.clear-boxclear:both;雖然這種方法比較直觀，但是不是很優(yōu)雅，由于增強了一個無用的空白標簽，比較冗余而且不便利后期維護（普通不太建議用法該方法）。所以后期有了通過父元素的偽元素（:after）實現(xiàn)的聞名clearfix辦法，代碼如下：.clearfix:aftercontent:""display:table;clear:both;上面辦法給父元素增強一個特地用于處理閉合子元素浮動的clearfix類名，該類用法:after偽元素類挑選器增強一個內(nèi)容為空的結(jié)構(gòu)來清除浮動，可能你們比較懷疑的是為什么要設(shè)置display:table屬性，這其實涉及到一個比較復(fù)雜的進化過程，詳細可以參考資料——c