BFC解决高度塌陷

高度塌陷情景

所谓高度塌陷是指在子父元素中，父元素未设置宽高，当子元素设置浮动后，父元素的高度不能被子元素撑开，出现高度塌陷。如下图所示

当出现上述情况时，我们可以给父元素开启BFC，解决高度塌陷问题。

BFC的定义：页面中的元素都存在一个属性，这个属性称为：Block Formatting Content 简称BFC

作用：这个属性可以开启或关闭。可以解决元素因外边距或者浮动产生的问题。

下面这段代码我们主要来使用BFC解决高度塌陷问题。

<style>
        .out{
            border: 1px solid #000;
            /* 父元素开启BFC 可以包含浮动的子元素 */
            overflow: hidden;
        }
        .in{
            float: left;
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
<div class="out">
        <div class="in"></div>
</div>

 由上结果图可以看出，当我们设置给父元素开启BFC，则当子元素浮动后，父元素不会出现高度塌陷问题。