本章给大家介绍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
一个经过完善设计的经典网上购物系统，适用于各种服务器环境的高效网上购物系统解决方案，shopxp购物系统Html版是我们首次推出的免费购物系统源码，完整可用。我们的系统是免费的不需要购买，该系统经过全面测试完整可用，如果碰到问题，先检查一下本地的配置或到官方网站提交问题求助。 网站管理地址：http://你的网址/admin/login.asp 用户名：admin 密 码：admin 提示：如果您
在 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;
} 
