当前位置： 移动技术网 > IT编程>网页制作>CSS > HTML中由于DIV(块元素)浮动，导致的父元素高度塌陷问题的解决方案

HTML中由于DIV(块元素)浮动，导致的父元素高度塌陷问题的解决方案

2019年07月29日  | 移动技术网IT编程  | 我要评论

费话不多说，直接上问题：

1.开始时，页面只有两个div的嵌套（见图）

 

运行结果是：

现在看运行的是正常的，但是当我设置让 class="box2" 的div浮动时

运行结果是这样的：

 图中可以看出，box1中已经没有了任何高度，这是由于box2设置了浮动属性，box2脱离了文档流（也可以理解为box2由于浮动脱离了浏览器页面，浮动在页面之上），box1中没有内容将其撑起

2.解决办法

给 box1添加上 clearfix 类，清除浮动

 

.clearfix:after,
.clearfix:before{
/* 在box1前后添加内容"" */
content: "";
/* 使内连元素转换为块元素 */
display: block;
/* 清除两侧的浮动 */
clear: both;
}

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网