BFC（块级格式化上下文）

BFC

BFC全称是Block Formatting Context，即块级格式化上下文。一句话概括，就是页面上的一个隔离的独立容器，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此。

注意点：BFC 并不是元素，而是某些元素带有的一些属性，因此，是这些元素产生了 BFC ，而它们本身并不是 BFC ，这个概念需要区分清楚。

如何触发产生一个BFC：

• float的值不为none。
• overflow的值不为visible。
• position的值不为relative和static。
• display的值为 inline-block,table-cell, table-caption中的任何一个。

（根元素本身就带有BFC的特性）

生成BFC后的三个作用：

1.不和浮动元素重叠
2.清除元素内部浮动
3.防止垂直 margin 重叠

加深理解BFC

FC（Formatting Contexts）——格式化上下文，是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

不同 FC 下的盒子有不同的表现，FC一共有四种类型：

• CSS2.1规范中只有BFC、IFC
• CSS3推出GFC、FFC两种新类型

BFC 这个概念来自于视觉格式化模型中的正常流。

• 视觉格式化模型：根据 基础盒模型(也就是块盒、行内盒、匿名盒以及一些实验性的盒) 将文档中的元素转换一个个盒子的实际算法，它规定了用户端在媒介中如何处理文档树。

• 有三种定位方案：分别是常规流(Normal flow)，浮动(Floats)以及绝对定位(Absolute positioning)。——在定位时，浏览器会根据元素的盒类型和上下文对这些元素进行定位。

从上面的信息中可以得知，BFC是页面CSS 视觉渲染的一部分，用于决定块盒子的布局及浮动相互影响范围的一个区域。

参考链接：
https://juejin.im/post/59b73d5bf265da064618731d#heading-14
https://juejin.im/post/5cee1b38e51d4556be5b39e1#heading-0
https://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html
https://www.cnblogs.com/leejersey/p/3991400.html