這篇文章主要介紹html高度塌陷怎么辦，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

作為一家“創(chuàng)意+整合+營(yíng)銷”的成都網(wǎng)站建設(shè)機(jī)構(gòu)，我們?cè)跇I(yè)內(nèi)良好的客戶口碑。創(chuàng)新互聯(lián)公司提供從前期的網(wǎng)站品牌分析策劃、網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、成都網(wǎng)站制作、創(chuàng)意表現(xiàn)、網(wǎng)頁制作、系統(tǒng)開發(fā)以及后續(xù)網(wǎng)站營(yíng)銷運(yùn)營(yíng)等一系列服務(wù)，幫助企業(yè)打造創(chuàng)新的互聯(lián)網(wǎng)品牌經(jīng)營(yíng)模式與有效的網(wǎng)絡(luò)營(yíng)銷方法,創(chuàng)造更大的價(jià)值。

高度塌陷的問題：
當(dāng)開啟元素的BFC以后，元素將會(huì)有如下的特性：

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

那么如何開啟元素的BFC？
   設(shè)置元素浮動(dòng)
   設(shè)置元素絕對(duì)定位
   設(shè)置元素為inline-block

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

display:inlink-block; 布局好了，但是寬度又沒有了。但是會(huì)導(dǎo)致寬度丟失，不推薦使用這種方式。

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

兼容性

在IE6中沒有BFC, 但是具有另一個(gè)隱含的屬性叫hasLayout.
該屬性的作用和BFC類似，所在IE6瀏覽器通過開啟hasLayout來解決問題。

方式：
   元素的zoom設(shè)置為1即可：zoom:1

在 IE6中如果為一個(gè)元素指定了一個(gè)寬度，則會(huì)默認(rèn)開啟一個(gè)

hasLayout.

clear:  both 清楚對(duì)他影響最大的那個(gè)元素的浮動(dòng)

解決高度塌陷的方案二

可以直接在高度塌陷的父元素的最后，添加一個(gè)空白的div
    由于這個(gè)div并沒有浮動(dòng)，他是可以撐開父元素高度的
    然后對(duì)其進(jìn)行清除浮動(dòng)，這樣可以通過這個(gè)空白的div來撐開父元素的高度，基本沒有副作用
    雖然可以解決問題啊，但是在頁面中添加多余的結(jié)構(gòu)。

通過after偽類 設(shè)置為塊級(jí)元素 清除兩邊浮動(dòng) 解決父類塌陷的問題
    通過after偽類，選中box1的后邊

.box1:after{
         content:"";
         display:block;
         //清除兩側(cè)的浮動(dòng)
         clear:both;
}
 /* IE6不支持偽類。  zoom:1;*/
.clearfix:after{
         /*添加一個(gè)內(nèi)容*/
         content:"";
         /*轉(zhuǎn)換為一個(gè)塊元素*/
         display:block;
         /*清除兩側(cè)的浮動(dòng)*/
         clear:both;
     }
 /*在IE6中不支持after偽類，
     所以在IE6中還需要使用hasLayout來處理*/

     .clearfix{
         zoom:1;
     }

IE6中如果上面的是內(nèi)聯(lián)元素    也是浮不上去的

終極版：

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

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

以上是html高度塌陷怎么辦的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！