CSS格式化上下文之GFC、FFC

        在前面两篇文章分别介绍了BFC、IFC，这两个都是CSS2里的规范和概念，这篇文章接续上两篇文章来说说CSS3规范里的GFC、FFC，至此这一序列的总结文章也就结束了。

1，CSS3

        介绍GFC，FFC，就绕不开CSS3，说起CSS3，我们就得从头来回顾下CSS的发展历史和CSS3的诞生。

诞生

        1990年，Web先驱Time Berners--Lee和Robert Calliau一起发明了Web，并在1994年Web真正走出了实验室，从Web(HTML)被发明开始，网页样式一直以各种形式存在， 但是网页的样式此时掌握在浏览器开发商手里，能控制的显示也很少，为了满足网页设计者的不断提升的要求，网页增加了越来越多的显示功能，变得越来越复杂，页面越来越臃肿，于是CSS诞生了，其实当时业界也提出了一些统一样式语言的建议，但是CSS是第一个具有“层叠”意义（继承、覆盖、设计灵活）的样式表语言，这门语言是在1994年由哈坤·利提出来的建议，并在伯特·波斯当时在设计的Web浏览器Argo上得到了应用，最终在1996年，W3C正式推出了CSS第一个规范，这就是CSS1。CSS1推出之前我们可以称之为CSS0时代（非规范）。

css1

    CSS1提供有关字体、颜色、位置和文本属性的的基本信息，该版本得到了目前可解析XML和HTML的浏览器的广泛支持，应用样式到标记系统的方式（可用样式属性和声明方式）主要有：

选择器：要使用CSS对HTML页面中的元素实现一对一、一对多、多对一的样式控制，就必须使用到选择器，选择器大致可分为Id选择器、类选择器、上下文选择器（通过元素位置的上下文关系来定义样式，应用或者避免某项规则，CSS2中被成为派生选择器 ），用来定义希望应用样式的HMTL元素或标签。

属性：属性包含属性名和值，中间已冒号隔开，属性通常包含在规则块里（｛｝包裹），按照作用属性大致可分为字体、颜色、位置、大小、边距、边框等，主要是定义网页以及网页元素的展示。

伪类与伪元素：伪类和伪元素都是用于向某些选择器设置的特殊效果，以冒号区隔比如a:acvtive{}

css2

CSS2是对CSS1的补充，属于包含关系，CSS2拓展了选择器，充实了样式单的功能，推荐的是内容和表现分离的方式来应用样式，

css3

css3是目前最新的一版，相对于css2选择器更加丰富、样式属性也更加丰富，增加增强了一些显示效果（如）动画，以前一些需要在js或者用图片实现的效果，现在可以考虑用Css来实现了。还有一个比较重要的一点，之前CSS中一些存在兼容的问题，在CSS3中得到了标准的支持。

2，FFC(Flexible Formatting Context)

        CSS3引入了一种新的布局模型——flex布局(之前有文章介绍过)。flex是flexible box的缩写，一般称之为弹性盒模型。和CSS3其他属性不一样，flexbox并不是一个属性，而是一个模块，包括多个CSS3属性。flex布局提供一种更加有效的方式来进行容器内的项目布局，以适应各种类型的显示设备和各种尺寸的屏幕，使用Flex box布局实际上就是声明创建了FFC(自适应格式上下文)，具体自定义格式上下文有什么特性，也可以参考我之前写的文章《盒模型和布局》。

        在布局的时候，较早时经常会使用浮动，使用浮动的元素会脱离文档流，那文档流到底是什么东西呢？ "流"是render tree（渲染树）在布局时的一个概念。

css2.1 中有相关的定义：

从上我们知道渲染数布局时依据的位置规则（当然还有大小，所占的空间），也就是说我们所说的流实际上规定了元素怎么排放以及相互作用（之前讲的渲染规则）。在CSS中主要有三种流： normal flow（普通流，我们经常将的脱离，脱离的就是它）、floats、Absolute Posioning（position不为static、relative）。FFC属于normal flow里的一个上下文概念，是普通流的一种，而浮动流和定位流以及CSS其他属性对FFC是有影响的，主要表现在以下几点:

　　[1] float、clear和vertical-align属性在伸缩项目上没有效果

　　[2] 伸缩容器的margin与其内容的margin不会重叠

　　[3] text-align属性在伸缩容器上没有效果，因为其只可应用于块级block容器

　　[4] 另外，columns属性伸缩容器上没有效果

备注：

脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。

3，GFC(GridLayout Formatting Context)

        也是在《盒模型和布局》中我们用table来实现了一个传统的三栏布局，这实际上是一种二维布局方式，CSS3中增加的GFC也是实现二维布局的方式，而且比table提供了更好的细节和控制。

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

        GFC的应用范式和flex有点像，以后我们专门介绍下此种布局方式（bootstrap css类库 里面模拟实现了网格布局），这里我们不展开叙述，我们只需知道和FFC一样，GFC也定义了特殊的渲染规则，也属于普通流的一种。