CSS-了解BFC和IFC
FC（Formatting Context）格式化上下文
定义的是页面中的一块渲染区域，并且由一套渲染规则，它决定了其子元素如何定位，以及和其他元素的关系和项目作用。
BFC（Block Formatting Context） 块级格式化上下文
是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域；
布局规则：
1 内部的Box会在垂直方向放置； 2 同一个BFC内，垂直方向的相邻盒子上下margin会重叠； 3 每个元素的margin box的左边，与包含块border box的左边链接（对于从右往左的局部，则相反），即使存在浮动也是如此； 4 子BFC的区域不会与float Box重叠； 5 BFC就是页面上的一个隔离的独立容器，容器里面的资源苏不会影响到外边的元素，反之如此； 6 计算BFC的高度时，浮动元素也参与计算（可以达到所谓清除浮动的效果，只要将包裹层转变成BFC）
如何将块级元素转换成BFC：
1 具有除了float:none的其他浮动属性； 2 定位为absolute或fixed； 3 display为block、inline-block、table-cell、table-caption、flex、inline-flex； 4 overflow不为visible（除非该值已经传播到视口，入html body会将overflow的值传播到视口，故此情况下，该属性不能建立BFC）；
BFC用处：
1.清除浮动：正常给子元素添加浮动，会造成父盒子的高度塌陷；给父盒子添加overflow:hidden，使其形成BFC，达到清除子盒子浮动影响的效果；
2.自适应两栏布局：正常两栏布局都是一半固定，一半浮动，可这样会造成浮动元素内容跑到固定元素空白位置；可给固定盒子添加overflow:hidden，触发BFC规则，完成两栏布局；
3.防止垂直margin重叠：利用BFC规则，两个元素中间添加一个包含overflow:hidden的元素，就能避免垂直margin的重叠；
IFC（Inline Formatting Context）内敛格式化上下文
布局规则：
框（boxes）一个接一个地水平排列，起点是包含块地顶部。
水平方向地margin，border和padding在框之间得到保留，框在垂直方向上可以以不同地方式对齐；
它们地顶部或底部对齐，或根据其中文字地基线对齐。包含哪些框地长方形区域，会形成一行，叫做行框。
作用：
水平居中：当一个块要在环境中水平居中的时候，设置其为inline-block则会在外层产生IFC，通过text-align:center则可以使其水平居中；
垂直居中：创建一个IFC，用其中一个元素撑开父元素高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中；
参考文章：
https://segmentfault.com/a/1190000009545742
https://www.jianshu.com/p/56bf298efb21
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context
https://www.w3.org/TR/CSS2/visuren.html#block-formatting
https://www.w3.org/TR/CSS2/visuren.html#inline-formatting
