本篇文章主要梳理FC和display的相关知识点，如下文：
一、Formatting Contexts(格式化上下文)
概念：它是页画中的一块渲染区域，且有一套渲染规则，它决定了其子元素将如何定位，以及和其它元素的关系和相互作用。
Formatting Context的种类
1、BFC(Block Formatting Context):块级格式化上下文
是一个独立的布局环境。如果有一个块级元素它触发BFC特性后，会决定块级子元素，应该如何去布局，布局完成后，外边的元素不会对里面的元素产生影响，同样里面的元素也不会对外面的元素有影响。
产生的方式：根元素；float的值不为none；overflow的值不是默认值即不为visible；display的值为table-cell,table-caption和inline-block中的任意一个；position的值为absolute或fixed.
bfc布局规则：浮动元素是会被父级计算高度; 非浮动元素不会覆盖浮动元素的位置；margin不会传递给父级；内部的box会在垂直方向，一个接一个地放置
bfc的作用：
往往用在消除浮动元素对非浮动兄弟元素和子元素带来的影响,可以阻止元素被浮动元素覆盖，可以包含浮动元素。
防止margin的重叠：属于同一个bfc的两个相邻块级子元素的上下margin会发生重叠，可以让两上盒子处于独立的bfc中就可避免这个问题。
2、IFC(Inline formatting Context):行内格式化上下文
以可称之为“内联格式化上下文”。IFC的line box(线框)高度由其包含行内元素中最高的实际高度计算而来。不受到竖直方向的padding,margin的影响。
产生的方式：块级元素中仅包含内联级别元素
布局规则：IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)；IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱；float元素会位于IFC与与line box之间，使得line box宽度缩短。 同个IFC下的多个line box高度会不同； IFC中时不可能有块级元素的，当插入块级元素时（如p中插入div）会产生两个匿名块与div分隔开，即产生两个IFC，每个IFC对外表现为块级元素，与div垂直排列。
IFC的作用：水平居中。当一个块要在环境中水平居中，设置其为inline-block则会在外层产生IFC通过text-align可以达到。
垂直居中：创建一个IFC用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle,其它行内元素则可以在此父元素下垂直居中。
主要影响IFC布局的css:font-size,line-height,heigth,vertical-align
3、FFC(Flex formatting Context):css3中的flex布局
概念：弹性格式化上下文
4、GFC(Grid formatting Context)：css3中grid布局
概念：为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。
二、display
display属性很常见，我们经常用到的是block,inline和inline-block这几个，还有其它的一些属性。
定义：display属性用于规定元素生成的框类型，影响显示方式
分类
1、block 特征：不设置宽度时，宽度为父元素宽度；独占一行；支持宽高
2、inline 特征：内容撑开宽度；非独占一行；不支持宽高；代码换行被解析成空格
3、inline-block 特征：不设置宽度时，内容撑开宽度；非独占一行；支持宽高；代码换行被解析成空格
4、none 特征：隐藏元素并脱离文档流
5、list-item 特征：不设置宽度时，宽度撑满一行；独占一行；支持宽高
6、table 特征：不设置宽度时，宽度由内容撑开；独占一行；支持宽高；默认具有表格的特征，可以 设置table-layout,border-collapse,border-spacing等属性
7、teble-cell 特征：不设置宽度时，宽度由内容撑开，非独占一行，支持宽高，垂直对齐，同级等高
display: none或者visibility: hidden都可以让元素隐蔽，但是display:none这个元素以及它的所有后代元素都是隐藏，完全脱离文档流，它占据的空间消失，它会有回流问题。而visibility:hidden也可以隐藏元素，但是隐藏元素仍然需要占据空间，元素虽然看不见，但是会影响页面的布局。