FC (Formatting Context)
格式化上下文是页面中的一块渲染区域，并且有一套渲染规则，决定了子元素如何定位，以及与其他元素的关系及相互作用。
BFC (Block Formatting Context)
块级格式化上下文指的是一块独立的布局区域，盒子内部元素的布局与外部不会互相影响。
触发方式
- 根元素（
<html>）。 - 浮动元素（
float不为none）。 - 绝对定位元素（
position为absolute/fixed）。 overflow不为visible的元素。display为inline-block/table-cell/flex的元素。
布局规则
- 内部的盒子会在垂直方向，一个接一个地放置。
- 盒子垂直方向的距离由
margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠。 - 每个元素的左边， 与包含的盒子左边相接触，即使存在浮动也是如此。
BFC的区域不会与float盒子重叠。BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。- 计算
BFC的高度时，浮动元素也参与计算。
应用场景
- 自适应两栏布局（左浮动 + 右BFC）。
- 避免
margin重叠问题（触发新的BFC）。 - 解决父元素高度坍塌问题（父容器触发BFC）。
- 清除浮动（父容器触发BFC）。
IFC (Inline Formatting Context)
内联格式化上下文指的是内联盒子的渲染区域，行内盒子按照水平方向排列。
触发方式
- 块级元素中仅包含内联级别元素。
布局规则
- 在一个
IFC内，子元素是水平方向横向排列的，并且垂直方向起点为元素顶部。 - 子元素只会计算横向样式空间（
padding、border、margin），垂直方向样式空间不会被计算。 - 在垂直方向上，子元素会以不同形式来对齐
vertical-align - 能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框（
line box）。行框的宽度是由包含块（containing box）和与其中的浮动来决定。 IFC中的line box一般左右边贴紧其包含块，但float元素会优先排列。IFC中的line box高度由CSS行高计算规则来确定，同个IFC下的多个line box高度可能会不同。- 当
inline boxes的总宽度少于包含它们的line box时，其水平渲染规则由text-align属性值来决定。 - 当一个
inline box超过父元素的宽度时，它会被分割成多个boxes，这些boxes分布在多个line box中。如果子元素未设置强制换行的情况下，inline box将不可被分割，将会溢出父元素。
应用场景
- 行内元素水平排列。
- 图标与文字垂直居中。
GFC (Grid Formatting Context)
网格格式化上下文指的是通过display: gird创建的二维布局结构，由网格容器控制子项位置。
触发方式
- 元素设置
display值为grid或者inline-grid。
布局规则
- 通过在
网格容器（grid container）上定义网格定义行（grid-template-rows）和网格定义列（grid-template columns）属性定义行和列的大小和数量。 - 使用
gap属性何止行和列之间的间距。
应用场景
- 响应式网页骨架。
- 复杂仪表盘。
- 杂志式布局。
FFC (Flexible Formatting Context)
弹性格式化上下文指的是通过display: flex创建的一维弹性容器，按主轴/侧轴分配子项空间。
触发方式
- 元素设置
display值为flex或者inline-flex。
布局规则
- 设置为
flex的容器被渲染为一个块级元素。 - 设置为
inline-flex的容器被渲染为一个行内元素。 - 弹性容器中的每一个子元素都是一个弹性项目。弹性项目可以是任意数量的。弹性容器外和弹性项目内的一切元素都不受影响。简单地说，
Flexbox定义了弹性容器内弹性项目该如何布局。
应用场景
- 卡片式布局。
- 自动撑开剩余宽度/高度布局。
相关问题
flex: 1代表什么
flex:1是flex-grow: 1; flex-shrink:1; flex-basis: 0%;的缩写。
- flex-grow：定义项目如何分配多余空间；默认为0（有剩余空间也不放大）；为1时会占据剩余空间。
- flex-shrink：定义项目在空间不足时如何收缩；默认为1（空间不足时缩小）；为0时空间不足也不缩小。
- flex-basis：定义项目的基础大小；项目占据的主轴空间。默认值为 auto，表示项目的大小由其内容决定；为0时，项目的初始化大小不考虑内容大小。