FC（Formatting Contexts）

Formatting Contexts，是W3C CSS2.1规范中的一个概念。它是web页面可视化渲染的一部分，决定了其子元素如何定位，以及与其它元素的相互作用。

BFC（block formatting context）

“块级格式化上下文”，容器里的子元素不会影响外面的元素，反之亦然。

以下会创建BFC：

root elment ()
floats (float 不为 none)
position为absolute或fixed
display:inline-block;
display:table; 或 display:table-cell; 或 display:table-caption; 或 display:table-*;
overflow不为visible
display:flex;或 display:inline-flex; 或 display:grid; 或 display:inline-grid;
Multicol containers (elements where column-count or column-width isn’t auto, including elements with column-count: 1).

BFC特性：

可以用来解决margin重叠，高度坍塌，清除浮动。

/* 清除浮动 */
.clearfix:after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

“内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)。

IFC特性：

IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。float元素会位于IFC与与line box之间，使得line box宽度缩短。
IFC中时不可能有块级元素的，当插入块级元素时（如p中插入div）会产生两个匿名块与div分隔开，即产生两个IFC，每个IFC对外表现为块级元素，与div垂直排列。

作用：