什么是BFC？？？

块格式化上下文（Block Formatting Context）是一个独立的渲染区域，简单来说就是一个独立的盒子，并且这个盒子里的布局不受外部影响，也不会影响到外部元素。
BFC规则

BFC的规则？

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

1.利用BFC避免margin重叠。
例如：




    
    
    
    防止margin重叠



    看看我的 margin是多少
    看看我的 margin是多少

页面生成的效果就是这样的：

根据第二条，属于同一个BFC的两个相邻的Box会发生margin重叠，所以我们可以设置，两个不同的BFC，也就是我们可以让把第二个p用div包起来，然后激活它使其成为一个BFC




    
    
    
    防止margin重叠



    看看我的 margin是多少
    
        看看我的 margin是多少

2.自适应两栏布局
每个盒子的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此
例如：




    
    
    
    Document



    LEFT
    RIGHT

页面生成的效果就是这样的：

BFC的区域不会与float box重叠。

所以我们让right单独成为一个BFC




    
    
    
    Document



    LEFT
    RIGHT

页面生成的效果就是这样的：

right会自动的适应宽度，这时候就形成了一个两栏自适应的布局。

3.清楚浮动。

当我们不给父节点设置高度，子节点设置浮动的时候，会发生高度塌陷，这个时候我们就要清楚浮动。

比如这样：

页面生成的效果就是这样的：

这个时候我们根据最后一条：计算BFC的高度时，浮动元素也参与计算。

给父节点激活BFC

页面生成的效果就是这样的：

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，同样的，外面的元素也不会影响到容器里面的子元素。