一、什么是FC？

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

二、BFC块级格式化上下文

1.BFC布局规则

内部的盒子会在垂直方向，一个个地放置。
盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠。
每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此。
BFC的区域不会与float重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此。
计算BFC的高度时，浮动元素也参与计算。

2.产生BFC的方式

根元素。
float的属性不为none。
position为absolute或fixed。
display为inline-block，table-cell，table-caption，flex。
overflow不为visible。

三、IFC行内格式化上下文

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垂直排列。

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

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

四、GFC网格布局格式化上下文

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

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

五、FFC自适应格式化上下文

Flex Formatting Contexts，display值为flex或者inline-flex的元素将会生成自适应容器，多用于移动端。

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

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

(37) BFC IFC GFC FFC概念相关推荐

BFC/IFC/GFC/FFC分别是什么？
BFC
css3中的BFC,IFC,GFC和FFC(转载)
作者原文网址:http://www.cnblogs.com/dingyufenglian/p/4845477.html What's FC? 一定不是KFC,FC的全称是:Formatting C ...
BFC、IFC、GFC、FFC概念理解、布局规则、形成方法、用处浅析
接着聊一下BFC.IFC,与FFC.GFC,GFC是一种二维度的布局方式,现在也蛮火,但是因为兼容性问题比较大,现在用的不多.其实这些布局方式经常会遇到,主要是想了解一下相关的各种概念和术语. 想要理 ...
CSS——FC（BFC/IFC/FFC/GFC）超详细版+原理案例分析
文章目录一.Box 二.包含块 2.1 确定一个元素的包含块 2.2 EXAMPLE 三.FC(Formatting Context) 四.BFC 1. BFC的形成条件 2. BFC的布局规则 3 ...
css----BFC,IFC,GFC，FFC的区别
FC:Formatting Contexts,是W3C CSS2.1规范中的一个概念.它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用. BFC ...
静态补充CSS之IFC、FFC、GFC讲解
IFC简介行级格式化上下文Inline Formatting Context IFC布局规则: ①在一个行内格式化上下文中,盒是一个接一个水平放置 ②这些盒之间的水平margin,border和pa ...
【C++深度剖析教程37】类模板的概念和意义
加qq1126137994 微信:liu1126137994 一起学习更多技术!!! 1.类模板一些类主要用于存储和组织数据元素类中数据的组织方式和数据元素的具体类型无关如数组类,链表类,st ...
CSS3与页面布局学习笔记（三）——BFC、定位、浮动、7种垂直居中方法
一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即"块级格式化上下文", IFC(Inline Formatting Co ...
CSS3与页面布局学习总结（四）——页面布局大全BFC、定位、浮动、7种垂直居中方法...
目录一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...

(37) BFC IFC GFC FFC概念