BFC

BFC的定义

BFC，全称叫做“Block Formatting Context”，中文名叫“块级格式化上下文”
根据对MDN中，BFC的定义是这样的：

• 一个块格式化上下文是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。
• 一个块格式化上下文包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素。
• 块格式化上下文对于定位与清除浮动很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。浮动不会影响其它块格式化上下文中元素的布局，并且清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动。

如何去理解BFC？

上述MDN的定义听起来很难以理解，那么到底什么是BFC呢？
BFC很难有一个明确的定义，大家都知道BFC是什么，却无法具体去定义它。简单来说，只要知道两件事情，就能很好去理解BFC。一是BFC产生的条件，二是BFC的特性。

BFC产生的条件

通常情况下，满足以下任一条件，就能生成一个BFC

• 根元素或其它包含它的元素
• 浮动元素 (元素的 float 不是 none)
• 绝对定位元素 (元素具有 position 为 absolute 或 fixed)
• 内联块 (元素具有 display: inline-block)
• 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
• 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
• 具有overflow 且值不是 visible的块元素，
• display: flow-root
• column-span: all 应当总是会创建一个新的格式化上下文，即便具有column-span: all 的元素并不被包裹在一个多列容器中。

值得注意的是，大部分生成BFC的方法都会使得当前的元素发生改变，例如浮动或绝对定位等等。其中唯有display: flow-root只为使当前元素成为一个BFC，没有其他任何功能，不会产生副作用，但是缺点是兼容性比较差，老版本的IE等浏览器不支持。

BFC的特性

生成一个BFC后，主要有两个特性。

1. BFC会包括当前块元素中所有的子元素，除了内部创建了新的BFC中的子元素。
2. BFC能够很好的让两个相邻的元素界限分明，互不干涉。

下面来看两个例子

假设有一个父元素包含一个子元素。给子元素浮动，父元素不设定宽高的情况下，浮动的子元素就会脱离父元素跑到外面去。

1-1.png

那么当我们给父元素加上overflow: hidden的时候，父元素就成了一个新的BFC，BFC会包含其内部的所有子元素，子元素就会完全被父元素包裹起来。

1-2.png

另外一个例子，有两个兄弟元素brother1 和brother2，给两个元素设定宽高，其中brother1设定左浮动，可以看到，看上去brother2是包含着brother1，两个兄弟元素没有明确的区分界限。

2-1.png

但当我们给brother2加上overflow: hidden的之后，可以很明显看出，两个相邻的兄弟元素因为BFC的影响完全区分开来了

2-2.png