介绍下 BFC、IFC、GFC 和 FFC

[hanyueqiang]

BFC（Block formatting contexts）：块级格式上下文

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。 可解决父元素高度塌陷，兄弟元素外边距折叠、清除浮动等问题。

只要元素满足下面任一条件即可触发 BFC 特性：

• body 根元素
• 浮动元素：float 除 none 以外的值
• 绝对定位元素：position (absolute、fixed)
• display 为 inline-block、table-cells、flex
• overflow 除了 visible 以外的值 (hidden、auto、scroll)

IFC（Inline formatting contexts）：内联格式上下文

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条件：

• A、display值为inline-blocks，inline；
• B、设置font-size；
• C、设置line-height，行高是指上下文本行的基线间的垂直距离；
• D、设置height；
• E、设置vertical-align。

GFC（GrideLayout formatting contexts）：网格布局格式化上下文

当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。

FFC（Flex formatting contexts）:自适应格式上下文

display值为flex或者inline-flex的元素将会生成自适应容器（flex container）

1、触发FFC的条件

• display值为flex。

2、FFC的特性

• 声明了一个弹性伸缩盒子。

3、FFC的用途

• 响应式布局。

结束

CSS2.1中只有BFC和IFC, CSS3中才有GFC和FFC。