高度塌陷的問題：
當開啟元素的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中如果上面的是內聯(lián)元素 也是浮不上去的

終極版：

//經(jīng)過修改后的clearfix是一個多功能的
//既可以解決高度塌陷，又可以確保父元素
和子元素的垂直外邊距重疊

.clearfix:before,.clearfix:after{ content:  display:table; clear:both;}

以上就是html如何解決高度塌陷問題的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。