高度塌陷与垂直方向外边距重叠

一、高度塌陷

1.介绍：当父元素没有设置高度时，如果子元素全部浮动，那么父元素将没有元素撑开，那么就会导致父元素高度塌陷。

案例如下：

<style>
        .wrapper{
            width: 300px;
            border: 2px solid red;
        }
        .box1{
            float: left;
            width: 50px;
            height: 50px;
            background-color: green;
        }
        .box2{
            float: right;
            width: 30px;
            height: 100px;
            background-color: #333;
        }
</style>

2.高度塌陷的解决方式

让父元素开启BFC（block formatting content）块级格式化环境。开启BFC的元素将会成为一个独立的布局区域。

开启BFC元素的特点：不会被浮动元素覆盖、父子外边距不会重叠、可以包含浮动的子元素。

(1)父元素设置overflow:hidden;属性