html如何解決高度塌陷問題

本章為大家介紹html如何解決高度塌陷問題。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

高度塌陷的問題：
當開啟元素的BFC以後，元素會有如下的特性：

1 父元素的垂直外邊距不會和子元素重疊
    開啟BFC的元素不會被浮動元素所覆蓋
    開啟BFC的元素可以包含浮動的子元素

那麼如何開啟元素的BFC？
    設定元素浮動
    設定元素絕對定位
    設定元素為inline-block

float:left; (不好)  雖然可以撐開父元素會導致父元素寬度丟失了；而且使用這種方式導致下邊的元素上移。

display:inlink-block; 佈局好了，但是寬度又沒有了。但是會導致寬度丟失，不建議使用這種方式。

元素的overflow  設定非visible值：
overflow:auto;  解決父元素高度塌陷 副作用最小的。

相容性

 在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;
}

以上是html如何解決高度塌陷問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！