Yasin

Yasin

BFC块级格式化上下文和IFC行内格式化上下文

BFC 和 IFC

1. BFC（Block Formatting Context）块级格式化上下文

是什么

BFC 是一个独立的布局区域，内部元素的布局不会影响外部，外部也不会影响内部。

怎么触发 BFC

满足以下任一条件：

  • overflow: hidden / auto / scroll（非 visible）
  • display: flex / grid / inline-block / table-cell
  • position: absolute / fixed
  • float: left / right
  • contain: layout（现代）

BFC 能解决什么问题

1) 清除浮动（解决高度塌陷）

<div class="parent">
  <div class="child" style="float:left; height:100px;">浮动子元素</div>
</div>

/* 父元素没有 BFC 时，高度为 0 */
.parent {
  border: 2px solid red;
}

/* 触发 BFC 后，父元素包裹住浮动子元素 */
.parent {
  overflow: hidden;
}

原因：BFC 区域计算高度时，浮动子元素也参与计算。

2) 防止 margin 塌陷

<div class="box1"></div>
<div class="box2"></div>

.box1 {
  margin-bottom: 20px;
}
.box2 {
  margin-top: 30px;
}
/* 两个相邻块元素，margin 会合并为 30px，而不是 50px */

解决方式：把其中一个包在 BFC 容器里，两者就在不同格式化上下文里，margin 不再合并：

<div class="box1"></div>
<div style="overflow:hidden">
  <div class="box2"></div>
</div>

3) 阻止文字环绕浮动

.content {
  overflow: hidden; /* 触发 BFC，不会绕着浮动元素排列 */
}

2. IFC（Inline Formatting Context）行内格式化上下文

是什么

IFC 是行内元素参与布局的区域，内容按行排列，不独占一行。

怎么触发 IFC

块容器里只包含行内元素时，自动形成 IFC：

<p><span>文字</span> <strong>加粗</strong> <a>链接</a></p>

IFC 的特点

  • 元素按水平方向依次排列
  • 一行排满后自动换行
  • 垂直方向对齐由 vertical-align 控制
  • 行高由 line-height 决定

IFC 常见应用

1) 水平居中

.parent {
  text-align: center; /* 让行内元素水平居中 */
}

2) 垂直对齐控制

span {
  vertical-align: middle; /* 行内元素垂直对齐 */
}

3) 图文混排

<p>
  <img src="icon.png" style="vertical-align: middle" />
  图标和文字对齐
</p>

3. BFC 和 IFC 的区别

对比 BFC IFC
参与元素 块级元素 行内元素
排列方向 垂直排列 水平排列
触发方式 overflow/float/position 等 容器内只有行内元素
核心作用 隔离布局、清浮动、防塌陷 行内排列、行高、对齐

一句话

  • BFC：隔离的块级布局区域，解决浮动、margin 塌陷等问题。
  • IFC：行内元素排列区域，控制行高、对齐、水平排列。
← 返回首页