盒子塌陷指的是當(dāng)一個(gè)元素的高度完全由其子元素的高度決定時(shí)，父元素的高度會(huì)變成0。這種現(xiàn)象在CSS中經(jīng)常發(fā)生，如果不及時(shí)處理，可能會(huì)導(dǎo)致頁面布局混亂。但是很多人并不知道這個(gè)問題的實(shí)際表現(xiàn)以及如何處理。

CSS盒子塌陷的一個(gè)常見表現(xiàn)就是在父元素使用浮動(dòng)或者絕對定位，子元素沒有顯式指定高度時(shí)，父元素會(huì)出現(xiàn)高度為0的情況。這時(shí)，可以使用以下兩種方法來解決這個(gè)問題。

父元素設(shè)置overflow: hidden; // 保證父元素包含子元素，不會(huì)出現(xiàn)高度為0的情況

另外一種方法是使用clearfix來清除浮動(dòng)。clearfix的實(shí)現(xiàn)方式很多，可以自己定義一個(gè)clearfix的class，也可以使用現(xiàn)成的庫，比如bootstrap中的clearfix。

.clearfix:before,
.clearfix:after {
content:" ";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1; /* IE6,IE7中需要加上 */
}

以上兩種方法都可以解決CSS盒子塌陷的問題，具體使用哪一種取決于實(shí)際情況。在進(jìn)行頁面布局時(shí)，我們應(yīng)該注意這個(gè)問題，并做出相應(yīng)的處理。