css中BFC的解释与解决方案

什么是BFC？

BFC是一个概念，可能有开发经验的人遇到过场景，但是没怎么理解。
概念：是个块级格式化上下文，他是指一个独立的块级渲染区域，只有块级盒子（Block-level BOX）的参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

现象

一个div盒子不设置height，当内容子元素都浮动时，div盒子无法被撑起。也就是说height一直为0；
这个盒子没有形成BFC；

如何创建BFC？

1. float的值不是none；
2. position的值不是static或者relative
3. display的值是inline-block flex 或者inline-flex
4. overflow:hidden(最佳)

BFC的其他作用

• 可以取消盒子margin的塌陷
  这里举个例子：

    //布局
    <div class="father">
        <div class="child"></div>
    </div>
   //css
    .father{
        width: 200px;
        height:200px;
        background-color: #0a63ab;
    }
    .child{
        width: 100px;
        height:100px;
        margin-top: 20px;
        background-color: #00d1b2;
    }

上方的代码是给子元素child加个margin，但是由于father没有形成BFC，导致的问题是margin塌陷了，在father身上生效了：截图看看

• BFC可以阻止元素被浮动元素覆盖住
  这个问题实际几乎用不到，知道有这个概念就行了

总结

上方就是对BFC的简单理解，为啥要说呢，场景谁都遇到过，就是用语言怎么去描述要有个概念，面试管经常会问到~