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怎样解决高度塌陷问题的具体内容，更多请关注百分百源码网其它相关文章！