本文已参与「新人创作礼」活动，一起开启掘金创作之路。
什么是FC
FC全称为Formatting Context，直译为格式化上下文，是页面中的一块渲染区域，它决定了子元素将如何布局，以及子元素之间的关系和作用。
CSS2中设定了BFC和IFC，CSS3中添加了GFC和FFC。
什么是BFC
BFC全称为Block Formatting Context，直译为块级格式化上下文，BFC盒子内外的布局不会相互影响，类似在BFC盒子上加了overflow：hidden。
BFC的特点
- 是一个独立的容器，容器内外的布局互不影响
- 容器内的元素垂直排列
- 容器不会和float盒子重叠
BFC的作用是什么
- 解决盒子塌陷问题：
- 当两个垂直盒子之间的间距出现重叠，分别给两个盒子创建BFC就可以显示出所有的间距。
- 当父子关系盒子之间出现给子盒子添加边距，父盒子也跟着添加的情况，给父盒子创建一个BFC就可以解决问题。
- 清除浮动：盒子内部使用浮动会让父级盒子失去高度进而“隐藏”，可以给父盒子创建BFC盒子，消除浮动对他的影响。
- 不让标准流和float盒子重叠：当添加BFC的标准流和浮动盒子同时出现时，会并列显示 而不是标准流被覆盖。
如何触发BFC
- HTML元素默认创建一个BFC
- float不为none
- position为absolute或fixed
- display为inline-block、table-cell、table-caption、flow-root
- overflow不为visible
什么是IFC
IFC全称为Inline Formatting Context，直译为内联格式化上下文。行内框在父级盒子内部水平排列。
什么是GFC
GFC全称为GridLayout Formatting Context，直译为网格布局格式化上下文，display值为grid时，元素将会获得一个独立的渲染区域，可以在网格容器中定义网格定义行和列。
什么是FFC
FFC全称为Flex Formatting Context，直译为自适应格式化上下文，display值为flex或者inline-flex时，元素将会生成自适应容器，内部的所有子元素都是自适应的，盒子内外布局互不影响。
