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

费话不多说,直接上问题:

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

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

 

运行结果是:

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

现在看运行的是正常的,但是当我设置让 的DIV浮动

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

运行结果是这样的:

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

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

2.解决办法

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

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

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

 

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpxwpp.html