浏览器上下文渲染之 BFC、IFC、FFC、GFC

浏览器能够解析各种各样的标签，你可以把每一个标签当做一个 box，不同样式的 box，相互堆积，相互嵌套，变成了花花绿绿的各种页面。很多人大概都知道，这些标签大体可以分两类，一类是块状(block)元素，一种是行内(inline)元素。一般人会理解为，块状元素垂直排列，行内元素横向排列，占满一行则会换行。但实际上呢，他们还具有一些其它的特性，且听我细细道来。

BFC

BFC 全称“block formatting context”,大概是说一个块状的元素是一个独立的盒子，这个 box参与创建 BFC，盒子内部的布局不影响外面，外面的布局页不会影响盒子内部。

BFC有以下特性：

• 内部的Box会在垂直方向，从顶部开始一个接一个地放置。（不解释，具体示例见：wangmingquan.com/lab/css/box/bfc1.html）
• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加。(wangmingquan.com/lab/css/box/bfc2.html)
• 每个元素的margin box的左边， 与包含块border box的左边相接触对于从左往右的格式化，否则相反。即使存在浮动也是如此。(意思就是说，不管左边有没有东西，盒子都会从父级的最左边开始渲染，但是又不会影响左边的东西。详情见：wangmingquan.com/lab/css/box/bfc3.html)
• BFC的区域不会与float box叠加。(参考上一条中的例子)
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
• 计算BFC的高度时，浮动元素也参与计算。(子元素浮动后，其实有多种方法来计算父元素的高度，详情见wangmingquan.com/lab/css/box/bfc4.html)

当我们知道了 BFC 的这些特性之后，如何去触发 BFC 呢？

• float 不为 none
• overflow 不为 visible
• display 为 inline-block / table / tabel-cell / table-caption / flex / inline-flex
• position 为 absolute / fixed
• fieldset 元素

IFC

在讲 IFC 之前，需要先明白一个概念是 linebox，指的是一个一行的容器。一个 linebox 可能包含多个 inlinebox，一个 inlinebox 也可能呗拆分成多个 linebox，其宽度是由它包含的元素的宽度和里面有没有 float元素决定的。

IFC 全称“inline formatting context”,主要包含的特性有：

• inlinebox之间的 margin、padding，linebox本身的width，在水平方向会得到响应
• linebox 的高度由最高的容器高度决定
• 当容器的宽度大于 linebox 的宽度，则会溢出（inlinebox的宽度小于一个字，或者white-space设置了nowrap/pre）
• inlinebox的左边缘和右边缘紧挨 linebox 的左边缘和右边缘

FFC

FFC 全称“flex formatting context”,主要应用在自适应布局，属于 css3 的范畴，移动端的浏览器支持得都还不错，可以放心的使用。触发可以通过设置 display 的值为 flex 或者 inline-flex(webkit 核心浏览器早期则是通过设置 display:-webkit-box)。 https://www.w3.org/TR/css-flexbox-1/

GFC

GFC 全称“GridLayout formatting context”,主要应用在自适应布局，属于 css3 的范畴，通过 display:grid 来触发。

http://www.w3.org/TR/css3-grid-layout
中文翻译详解