html高度塌陷問題解決

高度塌陷的問題：


    當開啟元素的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;
}