BFC
BFC(block Formating contexts) ： 块级格式化上下文，就是页面中的一块渲染区域，容器里面的子元素不在布局上影响到外面的元素。
如何产生BFC？
- float不为none
- body根元素
- overflow不为visiable
- position不为static和relative
- display为table-cell，table-caption， inline-block中的任何一个
作用：
比如常见的多栏布局，结合块级元素浮动。里面的元素则是在一个相对隔离的环境里运行
特性及引用：
1、同一个BFC下，外边框会发生折叠
<style>
div {
height: 100px;
width: 100px;
background: lightblue;
margin: 100px;
}
</style>
<body>
<div></div>
<div></div>
</body>
2.BFC可以包含浮动元素（清除浮动）
浮动元素脱离文档流
<div style="border:1px solid #000;">
<div style="height: 100px;width: 100px; background: #eee; float: left;">
</div>
</div>
<div style="border:1px solid #000; overflow: hidden;">
<div style="height: 100px;width: 100px; background: #eee; float: left;"></div>
</div>
3.阻止元素被浮动覆盖
<style>
div:nth-child(1) {
width: 100px;
height: 100px;
border:1px solid #000;
float: left;
background: lightblue;
}
div:nth-child(2) {
height: 200px;
width: 200px;
background: #eee;
}
</style>
<div> 浮动元素 </div>
<div>不是浮动元素不是浮动元素不是浮动元素不是浮动元素不是浮动元素不是浮动元
不是浮动元素不是浮动元素不是浮动元素不是浮动元素
</div>
给第二个div这是overlow：hidden
这个方法可以用来实现两列自适应，这是左边宽度固定，右边内容自适应
IFC
IFC（inline Formating contexts）： 内联格式化上下文 ， IFC的 inline box（线框）高度由其中包含行内元素中最高的实际高度计算而来（不受竖直方向的padding和margin影响）；
IFC中的 line box 一般左右都贴紧整个IFC，但是会因为float元素而扰乱；
IFC中是不肯有块级元素，当插入块级元素时（如p中插入div）会产生两个匿名块与div隔开，即产生两个IFC，每个IFC对外表现为块级元素，与div垂直排列
作用：
水平居中：当一个块级级元素要在环境中水平居中时，设置其为inline-block则会在外层产生 IFC，通过text-align则可以使其水平居中
垂直居中：创建一个IFC，用其中的元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中
FFC
FFC（flex Formating contexts）: 自适应格式化上下文，dispay为flex或者inline-flex的元素会常说自适应容器，只有谷歌和火狐支持，
Flex Box由伸缩容器和伸缩项目注册，设置元素的display为flex或者inline-flex，可以得到一个伸缩容器。设置flex的容器被渲染为一个块级元素，inlin-flex的容器则渲染为一个行内元素。伸缩容器中的每个子元素都是一个伸缩项目。伸缩项目可以是任意数量。伸缩容器外和伸缩容器项目内的一切元素都不受影响，简单的说，flexbox定义了伸缩容器内伸缩项目该如何布局。
GFC
GFC（grid Fomating Contexts）: 网格布局格式化上下文 。当一个元素设置display值为grid的时候，元素将会获得一个独立的渲染区域。
可以通过在网格容器上定义网格定义行(grid definition rows)和网格定列（grid definition columns）属性。在网格项目（grid item） 上定义网格行和网格列，为每一个网格项目定义位置和空间
GFC作用？和table的区别？
同样一个二维表格，GridLayout会有更加丰富的属性来控制行列，控制对齐以及更为精细的渲染语义控制
