CSS高级技巧之BFC、IFC、FFC、GFC

[hubvue]

文档布局对象

Box是CSS布局对象的基本单位，直观的说，就是一个页面是由很多个Box组成的，元素的类型和display属性，决定了这个Box的类型。不同类型的Box，会参与到不同的Formatting Context(一个决定如何渲染文档的容器)，因此Box内的元素会以不同的方式渲染。

两种box模型

1. block-level box ： display属性为block、list-item、table、inline-block的元素。一旦一个元素形成了块级，就会生成一个 block-level box，并参与到block fomatting context中去。
2. inline-level box：display属性为inline、inline-table的元素，会生成inline-level box 并且参与到inline formatting Context中。

什么是Formatting Context

Formatting Context 是W3C CSS2.规范中的一个概念。它是页面中一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位以及和其他元素的关系和相互作用。最常见的Formatting Context 有Block Formatting Context（简称BFC）和Inline Formatting Context（简称IFC）

会生成BFC的元素

1. 根元素
2. float属性不为none的元素
3. position为absolute或fixed的元素。
4. display为inline-block、table-cell、table-caption、flex、inline-flex
5. overflow不为visible的元素。

BFC规则

1. 每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。及时存在浮动也是如此。
2. 每个BFC都是相互独立的，BFC的不会与float box重叠。
3. 计算BFC高度的时候，浮动元素的高度也跟着计算，父级元素把内部浮动的元素包裹起来，也就起到了清除浮动的效果。
4. 同一个BFC中的两个元素，上下margin方向是重叠的，把两个元素中的其中一个也改为BFC，由于BFC之间是相互独立的，也就解决了问题。

总结

1. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
2. IFC（Inline Formatting Contexts）行级格式化上下文，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直党项的padding和margin影响）
3. FFC（Flex Formatting Contexts） 自适应格式化上下文，display值为flex或者inline-flex的元素会生成自适应容器
4. GFC（GridLayout Formatting Contexts）网格布局格式化上下文，当为一个元素设置display值为frid的时候，此元素将会获得一个独立的渲染区域我们可以通过网格容器(frid container)上定义网格、定义行（grid definition rows） 和网格定义列(grid definition columns)属性各在网格项目（grid item）上定义网格行（gird row）和网格列 （grid columns） 为每一个网格项目（dird item）定义位置和空间。