html如何解决高度塌陷问题

高度塌陷的问题：当开启元素的BFC以后，元素将会有如下的特性：

1 父元素的垂直外边距不会和子元素重叠 开启BFC的元素不会被浮动元素所覆盖 开启BFC的元素可以包含浮动的子元素

那么如何开启元素的BFC？ 设置元素浮动 设置元素绝对定位 设置元素为inline-blockfloat:left; (不好) 虽然可以撑开父元素 会导致父元素宽度丢失了；而且使用这种方式导致下边的元素上移。

display:inlink-block; 布局好了，但是宽度又没有了。但是会导致宽度丢失，不推荐使用这种方式。

兼容性

在 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;      }

终极版：

//经过修改后的clearfix是一个多功能的//既可以解决高度塌陷，又可以确保父元素和子元素的垂直外边距重叠

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

以上就是html如何解决高度塌陷问题的详细内容，更多内容请关注技术你好其它相关文章！