父元素高度塌陷问题的解决方案
在界面开发中,我们在布局的时候,很多情况下会给父元素的高度设置auto值,来自适应子元素高度。但是在子元素设置了浮动的情况下,就会出现父元素高度塌陷的问题。解决高度塌陷的方法有很多,但不同的方法多多少少都有一些副作用影响布局,现在介绍一种比较常用的副作用相对较少的解决方案。代码如下
css代码
//显示父元素
.box1{
border: 10px red solid;
}
.box2{
width:100px;
height:100px;
background-color: #bfa;
float: left;//设置浮动
}
//用伪元素after在父元素最后加上块级内容,并清除子元素浮动。实现父元素高度不塌陷。
.box1::after{
content: '';
display: block;
clear: both;
}
html代码
<div class="box1">
<div class="box2"></div>
</div>
效果如下