html如何解决高度塌陷问题

本章给大家介绍html如何解决高度塌陷问题。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

在 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如何解决高度塌陷问题的详细内容，更多请关注Gxl网其它相关文章！

查看更多关于html如何解决高度塌陷问题的详细内容...