BFC 与 IFC

Block Formatting Contexts 块级格式化上下文

定义

具有 BFC 特性的元素，可以看成是隔离了的独立容器，容器里面的元素在布局上不会对外部产生任何影响。

并且，BFC 容器会有一些额外的特性

如何触发 BFC

• body 根元素
• 设置了浮动的元素：float 除 none 以外的值
• 绝对定位元素：position 取值为 absolute、fixed
• display 为 inline-block、flex 的元素
• overflow 取值除了 visible 以外的元素

BFC 容器的特性

• 同一个 BFC 容器内，margin 会进行合并（上下外边距 100 的两个盒子，间距变为 100）
• BFC 容器可以包含浮动元素（清除浮动）。当内部元素设置浮动时，容器高度会坍塌。设置overflow:hidden触发 BFC 后，则不会出现坍塌
• 阻止元素被浮动元素覆盖：

<!-- 文字环绕效果 -->
<div style="height: 100px;width: 100px;float: left;background: lightblue">
  我是一个左浮动的元素
</div>
<div style="width: 200px; height: 200px;background: #eee">
  我是一个没有设置浮动, 也没有触发 BFC 元素
</div>

<!-- 清除了浮动的覆盖 -->
<div style="height: 100px;width: 100px;float: left;background: lightblue">
  我是一个左浮动的元素
</div>
<div style="width: 200px; height: 200px;background: #eee;overflow:hidden">
  我是一个没有设置浮动, 但触发了 BFC 效果的元素
</div>

IFC（Inline Formatting Context）是什么？

行内格式化上下文

特性：

• 内部元素水平排列
• 不会影响外部的 BFC 的布局
• 行高计算：每一行的高度由最高的行内元素决定
• 垂直方向的对齐由 vertical-align 控制
• 文本和行内元素会根据容器宽度换行，形成多行

触发方式：

• 行内元素或文本节点在 BFC 中默认生成
• 设置 display 为 inline、inline-block

和 BFC 的关系：

IFC 和 BFC 不是互斥的，而是两种层级上的，一个元素可以既是 BFC 又是 IFC（如 inline-block 的元素）

• BFC 决定这个盒子与外界、兄弟块如何排布。
• IFC 决定这个盒子内部的内联内容如何排布。