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

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

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

3、使之最后落在浮動(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è)置父元素的高度，那么該父元素的高度是由他的子元素高度撐開的。但是假如子元素是設(shè)置了浮動(dòng)，脫離了文檔流，那么父元素計(jì)算高度的時(shí)候就會(huì)忽視該子元素，甚至當(dāng)全部子元素都是浮動(dòng)的時(shí)候，就會(huì)浮現(xiàn)父元素高度為0的狀況，這就是所謂的父元素高度坍塌問(wèn)題。為了能讓父元素正確小包子元素的高度，不發(fā)生坍塌，我們需要閉合子元素的浮動(dòng)。普通我們有兩種方法可以用來(lái)閉合子元

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