BFC（Block Formatting Context）

1.什么是BFC

BFC（Block Formatting Context），块级格式化上下文，它规定了内部的块级元素的布局方式，默认情况下只有根元素（即body）一个块级上下文。

2.BFC布局规则

• 内部的块级元素会在垂直方向，一个接一个地放置；
• 块级元素垂直方向的距离由margin决定。属于同一个BFC的两个相邻的块级元素会发生margin合并，不属于同一个BFC的两个相邻的块级元素不会发生margin合并（注意：属于同一个BFC的元素，和创建BFC的元素是不一样的。前者是元素被包含在BFC里面，后者是一个元素自己作为父容器创建了BFC布局）；
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；外面的元素也不会影响到容器里面的子元素；
• 创建BFC的元素，计算其高度时，浮动元素也参与计算。
• 创建BFC的元素，它的边框盒不会和浮动元素重叠。
• 创建BFC的元素，不会和它的子元素发生外边距合并。
  （注：如果两个相邻元素都是创建了BFC的，那么这两个元素依然会发生margin合并。）

3.如何创建BFC

• float的值不为none；
• overflow的值不为visible；
• position的值为fixed / absolute，一定不能为static，和relative；
• display的值为table-cell / table-caption / inline-block / flex / inline-flex。
• 一个新的 display 属性的值，它可以创建无副作用的BFC。在父级块中使用 display: flow-root 可以创建新的BFC。

4.BFC应用

• 消除块级元素垂直方向上的margin合并
• 包裹浮动子元素