浅谈FFC

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



原文地址:https://www.cnblogs.com/fightjianxian/p/10570556.html