BFC是什么？

BFC，到底是什么？
在说之前，了解下常见定位方案（控制元素的布局）。
1、普通流（normal flow）：元素按照其在HTML中的先后位置自上而下布局，在这个过程中，行内元素水平排列，直到当前行被占满后换行；块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也就是说，普通流中元素的位置由该元素在HTML文档中的位置决定。
2、浮动（float）：在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边右边偏移，其效果与印刷排版中的文本环绕相似。
3、绝对定位（absolute positioning）：在此布局中，元素会整体脱离文档流，因此绝对定位元素不会对其他兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。

BFC 是 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流。

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

可以复制以下代码，自己试一下

    
    
    
    



    
    
这是没有BFC的
    

    

    

    
这是有BFC的
    

        
第一个p
    
    

        
第二个p
    
    

    

        父级加上overflow不为visible的值就可以实现BFC
        

    
    

    

    
我是一个左浮动元素
    
我是没有浮动元素，我的信息为width: 200px;height:300px;background:
        gray;若想让我不被左边浮动元素遮盖。想触发BFC，可以给自己加overflow:hidden;这样就实现BFC了。
    
    

    

        

            什么情况需要BFC？
        
        

            浮动元素遮挡；margin重叠；元素没有高度，如果只有border，会显示局部。
        
        

        
可以形成BFC的条件
        

            
根元素
            
 定位：fixed absolute ,
            
 float 不为none
            
display:flex grid table inline-block inline-flex table-cell table-caption flow-root 
            
 overflow不为visible.
        
    

虽然可能有点丑，不过对于理解的话，还是有帮助的。
参考：https://blog.csdn.net/qiphon3650/article/details/79427334?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522158722120819725219918395%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=158722120819725219918395&biz_id=0&utm_source=distribute.pc_search_result.none-task-blog-2_blogfirst_rank_v2~rank_v25-1