高度塌陷与BFC

高度塌陷与BFC

高度塌陷问题解释：
如下，我们写一个父元素div，在里面写一个子元素div

    <div class="father">
        <div class="child"></div>
    </div>

给父元素div设置border

        .father {
            border: solid 10px;
        }

这个时候我们呈现的效果是这样的，里面没有内容，因此还未被撑开

我们再给子元素添加高度，将这个盒子撑开

.child {
            height: 90px;
            width: 110px;
            background-color: aquamarine;
        }

效果如下

这个时候，盒子是被撑开了，但是当我们想要排列一行的时候，常常用到浮动float，那么我把浮动加上后，就会出现问题，并影响周围的布局，如下
我们现在父盒子外面加一个红色的块，如下

当我们给father内部的盒子添加浮动的时候，就出现了如下的问题

.child {
            height: 90px;
            width: 110px;
            float: left;
            background-color: aquamarine;
        }

浮动的绿色盒子脱离的文档流，father盒子也没有被撑开，而后面的红色块直接上移动，在绿色盒子的后面，这就是高度塌陷

想要解决这个问题，就要开启BFC（block formatting context：块式格式上下文，相当于一个不会和外界相互影响的环境），但是开启BFC后虽然能解决高度塌陷的问题，但也会有一定的副作用
常用的开启BFC方法有添加overflow:hidden
在父元素中添加后变为.father { border: solid 10px; overflow: hidden; }
此时就开启了BFC，解决了高度塌陷的问题，这种是副作用相对较小的方法，还可以添加overflow:scroll，如下效果：

但这是虽然解决了塌陷问题，却出现了滚动条，副作用较大
还有例如在父元素添加display:inline-block;虽然没有塌陷，但是宽度变了

overflow:hidden;是开启BFC副作用最小的方法。