1.内部的Box会在垂直方向上一个接一个的放置。
2.垂直方向上的距离由margin决定
3.bfc的区域不会与float的元素区域重叠。
4.计算bfc的高度时，浮动元素也参与计算
5.bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。

1)内部的盒子(Box)会在垂直方向上一个接一个的放置;

2)垂直方向上的距离由margin决定，属于同一个BFC的两个相邻的块级元素会发生margin合并，不属于同一个BFC的两个相邻的块级元素不会发生margin合并;

3)每个盒子的左边，与包含块的左边相接触(从右往左的格式，右边缘接触)。即使存在浮动也是如此，除非产生了新的BFC;

4)BFC的区域不会与float box重叠;

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

6)计算BFC的高度时，浮动元素也参与计算。

BFC的特性：

1. 属于同一个BFC的两个相邻Box的margin会发生折叠，不同BFC不会发生折叠；

2. BFC的区域不会与浮动元素的区域重叠；

3. BFC的高度包含浮动子元素的高度；

4. BFC在页面上是一个独立的容器，里外的元素不会互相影响；

5. 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）

是一个独立的块级作用域

BFC（Block Formatting Context——块格式化上下文）是Web页面的可视化CSS渲染的一部分。它是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。简单来说，BFC是一个独立的渲染区域，它遵循以下渲染规则。1. BFC在Web页面上是一个独立的容器，容器内外互不影响。2. 和标准文档流一样，BFC内的元素垂直方向的边距会发生重叠。3. BFC不会与浮动元素的盒子重叠。4. 计算BFC高度时即使子元素浮动也参与计算

1.   什么是BFC

BFC（Block Formatting Context——块格式化上下文）是Web页面的可视化CSS渲染的一部分。它是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。简单来说，BFC是一个独立的渲染区域，它遵循以下渲染规则。

2.   BFC的渲染规则

      1. BFC在Web页面上是一个独立的容器，容器内外互不影响
      2. 和标准文档流一样，BFC内的元素垂直方向的边距会发生重叠
      3. BFC不会与浮动元素的盒子重叠
      4. 计算BFC高度时即使子元素浮动也参与计算

3.   如何创建BFC

MDN web docs现在给出创建BFC的方法有以下几种（原文链接）：

      1. 根元素或包含根元素的元素
      2. 浮动元素（元素的 float 不是 none）
      3. 绝对定位元素（元素的 position 为 absolute 或 fixed）
      4. 行内块元素（元素的 display 为 inline-block）
      5. 表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
      6. 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
      7. 匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
      8. overflow 值不为 visible 的块元素
      9. display 值为 flow-root 的元素
    10. contain 值为 layout、content或 strict 的元素
    11. 弹性元素（display为 flex 或 inline-flex元素的直接子元素）
    12. 网格元素（display为 grid 或 inline-grid 元素的直接子元素）
    13. 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
    14. column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中

4.   BFC的应用场景

      1. 解决块级元素垂直方向的边距重叠问题

这是第一个div
这是第二个div

由于块级元素垂直方向的边距会发生重叠，第一个div和第二个div之间的间距并不是15px加上20px后的35px，而是20px（较大的margin值），为了解决边距重叠的问题，让第两个div之间的间距变成35px，可以在div外面创建一个BFC，比如：

这是第二个div

因为BFC是一个独立的容器，容器内外互不影响，所以这里两个div之间的间距就变成了35px。

      2. 清除浮动

这是一个浮动元素

子元素浮动后，父元素失去了高度，为了清除浮动带来的这个影响可以将父元素设置成一个BFC：

#father {background-color: pink;overflow: auto;}

因为BFC计算高度时，即使子元素是浮动元素也参与计算，所以这里的父元素高度就等于子元素高度而不是之前的0了。

      3. 解决元素浮动后发生重叠的问题

如图，左边的元素浮动之后，由于脱离标准文档流叠在了右边的元素上，为了让两个元素不重叠，我们把右边的元素设置成BFC：

#father .right {background-color: #ccc;height: 120px;}

因为BFC不会与浮动元素的盒子重叠，所以这里右边的元素就不会叠在左边的浮动元素下面了。

1)内部的盒子(Box)会在垂直方向上一个接一个的放置;

2)垂直方向上的距离由margin决定，属于同一个BFC的两个相邻的块级元素会发生margin合并，不属于同一个BFC的两个相邻的块级元素不会发生margin合并;

3)每个盒子的左边，与包含块的左边相接触(从右往左的格式，右边缘接触)。即使存在浮动也是如此，除非产生了新的BFC;

4)BFC的区域不会与float box重叠;

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

6)计算BFC的高度时，浮动元素也参与计算。

BFC（Block Formatting Context——块格式化上下文）是Web页面的可视化CSS渲染的一部分。它是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。简单来说，BFC是一个独立的渲染区域，它遵循以下渲染规则。

BFC的渲染规则

      1. BFC在Web页面上是一个独立的容器，容器内外互不影响
      2. 和标准文档流一样，BFC内的元素垂直方向的边距会发生重叠
      3. BFC不会与浮动元素的盒子重叠
      4. 计算BFC高度时即使子元素浮动也参与计算