浅谈FFC

Posted 2021-02-14 jianxian

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脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。