【CSS】BFC & IFC

[zh-rocco]

目录

• BFC
• IFC

BFC

Block Formatting Context(块格式化上下文) 是 W3C CSS 2.1 规范中的一个概念，在 CSS3 中被修改为 flow root。
格式化表明了在这个环境中，元素处于此环境中应当被初始化。元素如果创建了 BFC，则元素被 BFC 的特性约束。也就是 BFC 提供了一个环境，HTML 元素在这个环境中按照一定的渲染规则进行布局。一个环境中的元素不会影响到其他环境中的布局。

创建 BFC

1. 根元素或包含根元素的元素
2. overflow 值不为 visible 的块元素
3. 浮动元素（元素的 float 不是 none）
4. 绝对定位元素（元素的 position 为 absolute 或 fixed）
5. 行内块元素（元素的 display 为 inline-block）
6. 弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
7. 网格元素（display 为 grid 或 inline-grid 元素的直接子元素）
8. 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）column-span 为 all 的元素始终会创建一个新的 BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）
9. 表格元素
   • 表格单元格（元素的 display 为 table-cell，HTML 表格单元格默认为该值）
   • 表格标题（元素的 display 为 table-caption，HTML 表格标题默认为该值）
   • 匿名表格单元格元素（元素的 display 为 table、table-row、table-row-group、table-header-group、table-footer-group（分别是 HTML table、row、tbody、thead、tfoot 的默认属性）或 inline-table）
10. display 值为 flow-root 的元素
11. contain 值为 layout、content 或 strict 的元素

BFC 的规则

1. BFC 环境内的盒子会在垂直方向，一个接一个地放置
2. 盒子垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻盒子的 margin 会发生重叠
3. 每个盒子的左边界都要紧靠包含容器的左边界
4. BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素
5. 计算 BFC 的高度时，浮动元素也参与计算

兼容 IE

IE 浏览器中不支持 BFC 标准，但 IE 中有 Layout。Layout 和 BFC 基本等价，为了处理 IE 的兼容性，在需要触发 BFC 时，我们除了需要用上面的 CSS 属性来触发 BFC，还需要针对 IE 浏览器使用 zoom: 1; 来触发 IE 浏览器的 Layout。

IFC

当块容器盒（block container box）不包括任何块级盒（block-level boxes）时，就会创建一个行内格式化上下文（IFC）。

IFC 的规则

1. 盒子一个接一个的在水平方向摆放，当容器宽度不够时就会换行
2. 每一行将生成一个匿名行盒（line box），包括该行的所有行内级盒
3. 水平方向上，当所有盒的总宽度小于匿名行盒的宽度时，那么水平方向排版由 text-align 属性来决定
4. 垂直方向上，行内级盒的对齐方式由 vertical-align 控制，默认对齐为 baseline
5. 行盒的高度由内部子元素中实际高度最高的盒子计算出来，值得注意的是，行内盒（inline boxes）的垂直的 border，padding 与 margin 都不会撑开行盒的高度

注：在 IFC 的环境中，是不能存在块级元素的，如果将块级元素插入到 IFC 中，那么此 IFC 将会被破坏掉变成 BFC，而块级元素前的元素或文本和块级元素后的元素或文本将会各自自动产生一个匿名块盒其包围。

参考

• 块格式化上下文
• 格式化上下文