浮动高度塌陷的BFC解决办法

什么是高度塌陷？

当需求包含父元素高度随子元素变化而变化，即要求浮动的子元素始终得被父元素所包围，但是由于子元素浮动脱离文档流，会出现父元素高度丢失的情况，并且还会影响下一个元素的布局，如：

BFC：块级格式化环境 

• 定义：BFC是CSS中一个隐藏的属性，开启BFC的元素会变成一个独立的布局区域
• 特点1：开启BFC的元素不会被浮动的元素覆盖
• 特点2：开启BFC后子元素的外边距不会和父元素的外边距重叠
• 特点3：开启BFC后元素可以包含子元素（解决高度塌陷）

开启BFC的方法：

1. 设置元素浮动，有了包围效果，但是仍然会影响下一个元素的布局，所以不推荐

.out{
            background-color: #bfa;
            border: 10px red solid;
            float: left;
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color: burlywood;
            float: left;
        }

1. 将元素设置为行内块，不推荐

.out{
            background-color: #bfa;
            border: 10px red solid;
            display: inline-block;
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color: burlywood;
            float: left;
        }

1. 将overflow属性设置为非visible的值，推荐auto和hidden

.out{
            background-color: #bfa;
            border: 10px red solid;
           overflow: auto;
           /* overflow: hidden; */
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color: burlywood;
            float: left;
        }