BFC(Block formatting context)

直译为：块级格式化上下文

BFC是一个独立的布局环境，其中的元素布局是不受外界的影响。

它决定了块级元素如何对它的内容进行布局，以及与其他元素的关系和相互关系。

     块级元素：父级（是一个块元素）

     内容：子元素（是一个块元素）

     其他元素：与内容同级别的兄弟元素

     相互作用：BFC里的元素与外面的元素不会发生影响     
     

怎样触发BFC：

1. float的值不是none。
2. position的值不是static或者relative。
3. display的值是inline-block、table-cell、flex、table-caption或者inline-flex。
4. overflow的值不是visible。

BFC的作用：

1. 自适应两栏布局；
2. 阻止同级元素被浮动元素覆盖；
3. 阻止margin重叠（给其中一个div外面包一个div，然后通过触发外面这个div的BFC，就可以阻止这两个div的margin重叠）；
4. 包含浮动元素达到清除内部浮动的效果；

BFC布局与普通文档流布局的区别：

    普通文档流布局规则

            1.浮动的元素是不会被父级计算高度

            2.非浮动元素会覆盖浮动元素的位置

            3.margin会传递给父级

            4.两个相邻元素上下margin会重叠

    BFC布局规则

            1.浮动的元素会被父级计算高度（父级触发了BFC）

            2.非浮动元素不会覆盖浮动元素位置（非浮动元素触发了BFC）

            3.margin不会传递给父级（父级触发了BFC）

            4.两个相邻元素上下margin不会重叠（给其中一个元素增加一个父级，然后让他的父级触发BFC）
            
            
            
           

拓展：IFC（行内格式化上下文）