html中div充当父元素,HTML中由于DIV(块元素)浮动，导致的父元素高度塌陷问题的解决方-站长资讯中心...

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

1.开始时，页面只有两个DIV的嵌套(见图)

运行结果是：

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

运行结果是这样的：

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

2.解决办法

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

.clearFix:after,

.clearFix:before{

/* 在box1前后添加内容"" */

content: "";

/* 使内连元素转换为块元素 */

display: block;

/* 清除两侧的浮动 */

clear: both;

}

原文链接:https://www.cnblogs.com/BeenTogether/p/11262512.html

如有疑问请与原作者联系

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com

特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有