Formatting context有Block fomatting context(简称BFC)和Inline formatting context(简称IFC)
<h1>BFC</h1>
BFC就是“块级格式化上下文”的意思，创建了 BFC的元素就是一个独立的盒子，不过只有Block-level box可以参与创建BFC；
block-level box: display属性为block, list-item, table的元素，会生成block-level box。
inline-level box: display属性为inline, inline-block, inline-table的元素，会生成inline-level box。
*如何触发BFC呢？
浮动元素和绝对定位元素，非块级盒子的块级容器（如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的块级格式化上下文。
<pre>
float的值不为none。
overflow的值为auto,scroll或hidden。
display的值为table-cell, table-caption, inline-block中的任何一个。
position的值不为relative和static。
</pre>
*BFC 特性
<pre>
1.内部的Box会在垂直方向，一个接一个地放置。
2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4.BFC的区域不会与float box重叠。
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6.计算BFC的高度时，浮动元素也参与计算
</pre>
*在哪些场景可以用到BFC（如清浮动，防止 margin 重叠等）
<pre>
1.用于自适应两栏布局
- 清除内部浮动
- 防止垂直 margin 重叠
</pre>
<h1>IFC</h1>
IFC为"内联格式化上下文"，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来的
<pre>
1.IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。float元素会位于IFC与与line box之间，使得line box宽度缩短。
2.同个ifc下的多个line box高度会不同。
3.IFC中时不可能有块级元素的，当插入块级元素时（如p中插入div）会产生两个匿名块与div分隔开，即产生两个IFC，每个IFC对外表现为块级元素，与div垂直排列。
</pre>
那么IFC一般有什么用呢？
<pre>
水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，
通过text-align则可以使其水平居中。
垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其
vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。
</pre>
网友评论