Ceryn

CSS BFC 和 IFC

6分钟阅读

活跃分钟 0访问量 0点赞量 0点击量 0

网站

块格式化上下文 | MDN

Visual formatting model | MDN

引入

CSS 布局不是元素随便摆放，浏览器会按不同的格式化规则排列元素。

BFC 和 IFC 就是两类常见的格式化上下文，用来理解块级元素和行内元素如何排版。

正文

定义

定义

BFC 是块级格式化上下文，主要影响块级盒子的垂直排列；IFC 是行内格式化上下文，主要影响行内内容在一行中的排列。

这两个概念比较抽象，但可以把它们理解为浏览器内部的“排版区域规则”。

不同区域有不同的排版方式。

BFC

BFC 的英文是 Block Formatting Context，中文常叫块级格式化上下文。

在 BFC 中，块级元素通常从上到下排列。

<div class="box">第一个盒子</div>
<div class="box">第二个盒子</div>
.box {
  margin-bottom: 16px;
}

两个 .box 会按块级元素规则上下排列。

BFC 的常见作用

BFC 常用于解决这些问题：

  • 包住内部浮动元素
  • 阻止外边距合并
  • 避免元素被浮动元素覆盖

触发 BFC 的常见方式

写法说明
overflow: hidden;常见触发方式
overflow: auto;内容溢出时可滚动
display: flow-root;专门创建 BFC
display: inline-block;行内块会形成格式化上下文
position: absolute;绝对定位元素会形成 BFC
position: fixed;固定定位元素会形成 BFC
float: left;浮动元素会形成 BFC

现在更推荐使用 display: flow-root; 表达“这里需要一个新的 BFC”。

BFC 包住浮动元素

父元素里只有浮动子元素时，父元素可能没有高度。

<div class="panel">
  <img class="avatar" src="avatar.jpg" alt="头像">
</div>
.avatar {
  float: left;
  width: 80px;
}

可以给父元素创建 BFC。

.panel {
  display: flow-root;
}

这样 .panel 就能包含内部浮动元素。

BFC 阻止外边距合并

相邻块级元素或父子元素之间的上下 margin 有时会合并。

创建 BFC 可以隔开这种影响。

.card {
  display: flow-root;
}

这样 .card 内部子元素的上外边距就不容易跑到父元素外面。

BFC 避免被浮动覆盖

<img class="cover" src="cover.jpg" alt="封面">
<div class="content">正文内容</div>
.cover {
  float: left;
  width: 160px;
}
 
.content {
  overflow: hidden;
}

.content 创建 BFC 后，会尽量避开左侧浮动元素。

IFC

IFC 的英文是 Inline Formatting Context，中文常叫行内格式化上下文。

它主要处理行内元素和文字如何在一行中排列。

<p>
  这是一段文字，里面有 <a href="#">链接</a> 和 <strong>加粗文字</strong>。
</p>

在这段内容里，文字、<a>、<strong> 会按行内排版规则从左到右排列，空间不够时自动换行。

IFC 中的常见现象

  • 行内内容会在一行中水平排列
  • 一行放不下时会换到下一行
  • line-height 会影响行盒高度
  • vertical-align 可以控制行内元素的垂直对齐
  • 行内元素设置 width、height 通常不明显生效

行内元素对齐

<span class="text">文字</span>
<img class="icon" src="icon.png" alt="图标">
.icon {
  width: 20px;
  vertical-align: middle;
}

vertical-align: middle; 可以让图标和文字在视觉上更接近居中对齐。

BFC 和 IFC 对比

名称主要对象排列方式常见关注点
BFC块级盒子从上到下排列清除浮动、外边距合并
IFC行内内容从左到右排列，自动换行行高、基线、垂直对齐

例子

用 flow-root 清除浮动

<div class="media">
  <img class="media-img" src="photo.jpg" alt="照片">
  <p>这是一段说明文字。</p>
</div>
.media {
  display: flow-root;
}
 
.media-img {
  float: left;
  width: 120px;
  margin-right: 16px;
}

.media 创建 BFC 后，可以包住浮动图片。

特点

  • BFC 主要影响块级元素布局
  • IFC 主要影响文字和行内元素布局
  • BFC 可以解决一些浮动和外边距问题
  • display: flow-root; 是创建 BFC 的清晰写法
  • IFC 中要重点关注 line-height、基线和 vertical-align

注意事项

  • BFC 是理解布局问题的工具，不需要为了概念而强行使用
  • overflow: hidden; 可以触发 BFC，但也可能裁剪溢出内容
  • 如果只是为了清除浮动，display: flow-root; 语义更直接
  • 行内元素如果需要设置宽高，可以考虑改成 inline-block 或 block

理解

BFC 和 IFC 可以理解为浏览器排版时的两套规则。

BFC 管的是块级盒子怎么一块一块往下排，IFC 管的是文字和行内元素怎么在一行里排。

平时不一定总要说出概念，但遇到浮动、外边距合并、行高对齐问题时，这两个概念很有用。

引出

理解 BFC 和 IFC 后，可以继续学习 CSS Flexbox 和 CSS Grid，它们提供了更现代、更直接的布局方式。

关系图谱

反向链接