FC（Formatting Context）指格式化上下文，是css2.1中的一个概念，它是页面中的一个渲染区域，决定了其子元素如何定位，以及和其他元素之间的相互作用。
css渲染规则有四种常见类型
- BFC（Block Formatting Context）块级格式化上下文
- IFC（inline Formatting Context）内联格式上下文
- FFC（Flex Formatting Context）弹性格式化上下文
- GFC（GridLayout Formatting Context）网格布局格式化上下文
BFC的渲染规则
1.内部的Box会在垂直方向，一个接一个地放置。
2.Box垂直方向的距离由margin决定。
3.属于同一个BFC的两个相邻Box的margin会发生重叠
4.每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
5.BFC的区域不会与float box重叠。
6.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
7.计算BFC的高度时，浮动元素也参与计算
了解完BFC的渲染规则后，就能找到下面这些问题的答案了
- 为什么我两个盒子都有margin，但好像没生效？（margin重叠）
- 为什么浮动之后外层容器没有高度样式乱了？（浮动高度塌陷）
- 为什么我浮动的元素会挡住正常布局的元素?（浮动占位）
那么该如何解决上述问题呢？根据上述第【6】条，我们可以创建一个新的BFC，因为BFC就是页面上的一个隔离的独立容器，把出现问题的Box隔离开，问题就迎刃而解了。
创建BFC
1.根元素或其它包含它的元素
2.绝对定位的元素 (元素具有 position 为 absolute 或 fixed)
3.非块级元素具有 display: inline-block，table-cell, table-caption, flex, inline-flex
4.块级元素具有overflow ，且值不是 visible
所以 上述三个问题都可以通过overflow:hidden解决
IFC的渲染规则
在行内格式化上下文中，框(boxes)一个接一个地水平排列，起点是包含块的顶部。水平方向上的 margin，border 和 padding在框之间得到保留。框在垂直方向上可以以不同的方式对齐：它们的顶部或底部对齐，或根据其中文字的基线对齐。包含那些框的长方形区域，会形成一行，叫做行框，行框高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的 padding/margin 影响)。
- 子元素水平方向横向排列，并且垂直方向起点为元素顶部
- 子元素只会计算横向样式空间（包含padding、border、margin），垂直方向上的padding、border、margin不会被计算
- 在垂直方向上，子元素会以不同形式来对齐（vertical-align）
- 能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框（line box）。行框的宽度是由包含块（containing box）和与其中的浮动来决定
- IFC中的“line box”一般左右边贴紧其包含块，但 float 元素会优先排列
- IFC中的“line box”高度由 CSS 行高计算规则来确定，同个IFC下的多个 line box 高度可能会不同
- 当 inline-level boxes 的总宽度少于包含它们的 line box 时，其水平渲染规则由 text-align属性值来决定
- 当一个“inline box”超过父元素的宽度时，它会被分割成多个 boxes，这些 boxes 分布在多个“line box”中。如果子元素未设置强制换行的情况下，“inline box”将不可被分割，将会溢出父元素
创建IFC
块级元素中仅包含内联级别元素即可创建一个IFC
GFC的渲染规则
网格布局不同于传统布局，它可以将布局二维化，通过设置行、列等属性，轻松完成九宫格式的布局，
创建GFC
display值为grid的时候， 元素将会获得一个独立的渲染区域，这就是GFC。
FFC的渲染规则
弹性布局由容器和项目组成，可以通过一系列的属性设置，完成容器和项目的布局。
创建FFC
display值为flex或者inline-flex的元素将会生成自适应容器，即为FFC（设置为 flex 的容器被渲染为一个块级元素，而设置为 inline-flex 的容器则渲染为一个行内元素）
小结（个人理解）
其实所谓的FC就是css样式比较底层的渲染规则，接触css初期，我们只知道学习某个元素会有什么属性，再在浏览器中看看写上这个属性之后会有什么样的表现。但并没有究其根源，比如为什么行内写一段文字时文字能自动折行，为什么浮动元素会飘到正常布局的元素上方.... 学习了解完各种FC之后对css的认知又上了一个台阶，所谓的样式问题也就都有了答案。
