一、BFC定义

1、 box

box是css布局的基本单位，元素的类型和display属性决定了box的类型。不同的类型的盒子会参与不同的formatting context。

block-level box :display属性为block、list-item(作为列表显示的元素)、table的元素会生成block-level box。

2、formatting context

它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用

• BFC（block formatting context）为块级格式化上下文，他是一个独立渲染区域，并且只有block-level box参与，规定了block-level box内部的布局方式。

二、布局规则

1、内部的box会在垂直方向上一个接一个的放置

    
    
复制代码

2、同一个bfc内，两个相邻box元素的margin会产生重叠，重叠距离为数值大的margin值

给div1设置 margin: 20px 0,给div2设置 margin: 30px 0,此时div1和div2之间的间距为30px。

• 解决方式 让两个元素不属于同一个BFC
  3、BFC区域不会与浮动元素重叠

    
    
复制代码

此时main元素没有产生bfc,left元素浮动，效果如下：

给main元素设置 overflow:hidden变为bfc,效果如下：

4、计算BFC的高度时，浮动元素也参与计算 5、每个元素的margin box的左边， 与 包含块 border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此

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

3、产生BFC的方式

1、overflow属性不是visible

2、float属性不为none 3、display属性为inline-block、table-cell、flex、inline-flex、table-caption 4、position为absolute、fixed 5、body根元素