父元素高度塌陷问题的解决方案

父元素高度塌陷问题的解决方案

在界面开发中，我们在布局的时候，很多情况下会给父元素的高度设置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>

效果如下