高度塌陷的問題：    當開啟元素的BFC以後，元素將會有如下的特性    1 父元素的垂直外邊距不會和子元素重疊    開啟BFC的元素不會被浮動元素所覆蓋    開啟BFC的元素可以包含浮動的子元素    如何開啟元素的BFC    設定元素浮動    設定元素絕對定位    設定元素為inline-block    float:left; (不好)  雖然可以撐開父元素 會導致父元素寬度丟失了    而且使用這種方式導致下邊的元素上移。    display:inlink-block;    佈局好了，但是寬度又沒有了。但是會導致寬度丟失，不推薦使用這種方式    4 將元素的overflow  設定非visible值    overflow:visible    overflow:auto;  解決父元素高度塌陷 副作用最小的            hidden;相容性 在IE6中沒有BFC, 但是具有另一個隱含的屬性叫hasLayout. 該屬性的作用和BFC類似，所在IE6瀏覽器通過開啟hasLayout來解決問題。 方式：     元素的zoom設定為1即可     zoom:1     在 IE6中如果為一個元素指定了一個寬度，則會預設開啟一個     hasLayout.

clear:  both 清楚對他影響最大的那個元素的浮動

解決高度塌陷的方案二

     可以直接在高度塌陷的父元素的最後，新增一個空白的div     由於這個div並沒有浮動，他是可以撐開父元素高度的     然後對其進行清除浮動，這樣可以通過這個空白的div來撐開父元素的高度，基本沒有副作用     雖然可以解決問題啊，但是在頁面中新增多餘的結構。    **********************************    ==>     通過after偽類 設定為塊級元素 清除兩邊浮動 解決父類塌陷的問題     通過after偽類，選中box1的後邊     .box1:after{         content:"";         display:block;         //清除兩側的浮動         clear:both;     }     IE6不支援偽類。  zoom:1;     .clearfix:after{         /*新增一個內容*/         content:"";         /*轉換為一個塊元素*/         display:block;         /*清除兩側的浮動*/         clear:both;     }     /*在IE6中不支援after偽類，     所以在IE6中還需要使用hasLayout來處理*/     .clearfix{         zoom:1;     }IE6中如果上面的是內聯元素    也是浮不上去的 

終極版：

//經過修改後的clearfix是一個多功能的//既可以解決高度塌陷，又可以確保父元素和子元素的垂直外邊距重疊.clearfix:before,.clearfix:after{    content:"";    display:table;    clear:both;}