BFC、IFC、GFC、FFC

BFC、IFC、GFC、FFC

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

那么到底什么是BFC、IFC、GFC和FFC呢？

What’s FC?

一定不是KFC，FC的全称是: Formatting Contexts，是W3CCSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

BFC

BFC(Block Formatting Contexts)直译为"块级格式化上下文"。Block Formatting Contexts就是页面上的一个隔离的渲染区域，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此。如何产生BFC?

float的值不为none。overflow的值不为visible。position的值不为relative和static。display的值为table-cell, table-caption, inline-block中的任何一个。那BFC一般有什么用呢?比如常见的多栏布局，结合块级别元素浮动，里面的元素则是在一个相对隔离的环境里运行。

IFC

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一般有什么用呢?

水平居中:当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。

垂直居中:创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。

GFC

GFC(GridLayout Formatting Contexts)直译为"网格布局格式化上下文"”，当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器(grid container)上定义网格定义行(griddefinition rows）和网格定义列(grid definition columns)属性各在网格项目(grid item)上定义网格行(gridrow）和网格列(grid columns)为每一个网格项目(grid item)定义位置和空间。

那么GFC有什么用呢，和table又有什么区别呢?
首先同样是一个二维的表格，但GridLayout会有更加丰富的属性来控制行列，控制对齐以及更为精细的渲染语义和控制。

FFC

Flex Box由伸缩容器和伸缩项目组成。通过设置元素的display属性为flex或inline-flex可以得到一个伸缩容器。设置为flex的容器被渲染为一个块级元素，而设置为inline-flex的容器则渲染为一个行内元素。

Flex Box由伸缩容器和伸缩项目组成。通过设置元素的display属性为flex或inline-flex可以得到一个伸缩容器。设置为flex的容器被渲染为一个块级元素，而设置为inline-flex的容器则渲染为一个行内元素。

伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。简单地说，Flexbox定义了伸缩容器内伸缩项目该如何布局。

BFC及其应用

一、常见定位方案

在讲 BFC之前，我们先来了解一下常见的定位方案，定位方案是控制元素的布局，有三种常见方案:·普通流(normal flow)

在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。

·浮动(float)

在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。

·绝对定位(absolute positioning)

在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。

二、BFC概念

Formatting context(格式化上下文)是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。那么BFC是什么呢?BFC即Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流。通俗一点来讲，可以把BFC理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。通俗一点来讲，可以把BFC理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

三、触发BFC

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

（1）body根元素

（2）浮动元素:float 除none 以外的值

（3）绝对定位元素:position (absolute、fixed).

（4）overflow除了visible以外的值(hidden、auto、scroll)

（5）display为inline-block、table-cells、flex

四、BFC特性及应用

1.同一个BEC下外种距会发生折叠

2.清楚浮动

3.阻止元素被浮动元素覆盖