从三大元素到 BFC，看完这篇还怕面试官问你“浮动”？

Category（分类）: CSS Status: 未知

面试官：谈谈你对 BFC 的理解？｜Web 前端面试

写在前面

最初，引入 float 属性是为了让 Web 开发人员实现简单的布局，例如在一列文本中浮动一张图片，让文字环绕在图片的左侧或右侧：

随着网页布局方式不断发展，现在有更多现代化的布局方式，例如 Flexbox 和 Grid。它们更加灵活，也更适合页面和组件的整体布局。因此，浮动布局虽然仍然有它的用处，但现在通常不再作为主要的页面布局方案。

浮动仍然值得学习，因为很多历史项目、文字环绕场景和面试题都会涉及它。理解浮动，还能帮助我们理解普通流、格式化上下文、BFC 和高度塌陷。

本文保留原文的讲解顺序和示例，并修正“块级/行内元素分类”“浮动完全脱离文档流”“Flex 容器就是 BFC”等容易引起误解的说法。

块级、行内以及行内块

在传统 CSS 布局中，我们经常从块级盒、行内盒和行内块说起。严格来说，这些不是 HTML 元素永久固定的三种类型，而是元素在特定 display 值下表现出的布局方式。

CSS Display 规范还会把 display 理解为两个维度：

• 外部显示类型（outer display type）：盒子如何参与父级布局，例如 block 或 inline；
• 内部显示类型（inner display type）：盒子如何布局自己的子元素，例如 flow、flow-root、flex 或 grid。

例如，div 默认表现为块级盒，但通过 CSS 可以变为 inline、inline-block、flex、grid 等。inline-block 可以理解为外部表现为 inline、内部建立独立 flow-root；inline-flex 和 inline-grid 则分别是行内级的 Flex 容器和 Grid 容器。下面的例子用于说明三种常见的传统布局方式。

1. 块级元素（Block-level boxes）

.item {
  width: 100px;
  height: 100px;
}

.item1 {
  background-color: #f1f755;
}

.item2 {
  background-color: #38c7f7;
}

.item3 {
  background-color: #62fab0;
}

<div class="item item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>

在正常的块布局中，普通流中的块级盒通常会独占一行，后续块级盒会排在下一行；当其 width 为 auto 时，通常会占据包含块的可用宽度。这里的“默认有间距”并不准确：div 默认没有外边距，段落和标题的间距通常来自浏览器的用户代理样式。

块级盒通常具有以下特点：

• 会在块方向上依次排列；
• width 和 height 通常可以设置；
• margin、padding、border 等盒模型属性通常可以完整发挥作用；
• 具体布局行为仍然取决于 display、定位方式和格式化上下文。

常见默认表现为块级的元素包括 <div>、<p>、<h1> 到 <h6>、<ul>、<ol> 等。<li> 的默认 display 通常是 list-item，它参与块布局但还具有列表标记相关行为。

2. 行内元素（Inline boxes）

继续使用相同的结构，如果把 div 的 display 设置为 inline：

div {
  width: 100px;
  height: 100px;
  display: inline;
}

<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>

如果这些行内 div 没有文本、内联内容、内边距或边框，它们可能没有可见的行盒，因此看起来像“什么都没有”。同时，普通非替换行内元素的 width 和 height 通常不会按预期生效。

行内盒通常具有以下特点：

• 在行内方向上排列，空间不足时会换行；
• 普通非替换行内元素的宽高主要由内容和行高决定；
• width、height 通常不适用于普通非替换行内元素；
• <img>、<input> 等替换元素即使表现为行内或行内块，也可以有自身尺寸。

常见的行内元素包括 <span>、<a>、<strong>、<em> 等。

3. 行内块元素（Inline-block boxes）

如果给 div 设置 display: inline-block，它会在行内方向排列，同时保留块盒的宽高能力：

div {
  width: 100px;
  height: 100px;
  display: inline-block;
}

如果 HTML 源码中两个 inline-block 之间存在换行或空格，浏览器会把它们当作文本空白的一部分，通常会出现间隙：

<div class="item item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>

解决间隙可以使用以下方式：

• 将标签写在同一行；
• 使用 HTML 注释消除源码空白；
• 给父元素设置 font-size: 0，并为子元素恢复需要的字体大小；
• 更推荐在现代项目中使用 Flexbox 和 gap，避免依赖源码空白。

行内块的主要特点：

• 可以在同一行内排列；
• 可以设置宽度和高度；
• 默认具有行内布局的换行行为；
• 会受到父元素 text-align 和源码空白的影响。

常见表现为行内块的元素包括 <input>、<button>、<textarea>，以及通过 CSS 设置 display: inline-block 的元素。

浮动的基本特性

float 常用属性值

float 最初主要服务于文字环绕图片。它也曾被大量用于多列布局，但现在页面和组件布局通常优先使用 Flexbox 或 Grid。

普通块级元素遇到浮动

回到上面的块级示例，只给 item1 添加左浮动：

.item1 {
  background-color: #f1f755;
  float: left;
}

然后只给 item2 添加左浮动：

.item2 {
  background-color: #38c7f7;
  float: left;
}

可以观察到，浮动元素会脱离普通流中的位置。后续普通块级盒在垂直方向上的布局通常不会为浮动元素预留完整的块盒空间，因此普通块的背景或边框可能出现在浮动元素下面；但其中的行内内容会为浮动元素让出空间，从而实现文字环绕。

所以，“后面的元素上移并被覆盖”只是观察背景和边框时的简化描述，不能理解为所有后续内容都会无条件覆盖或忽略浮动元素。

多个浮动元素

如果给 item1 和 item2 都添加左浮动：

.item1,
.item2 {
  float: left;
}

两个浮动元素会按照浮动规则依次尝试放置在同一行。只要剩余空间足够，后一个浮动元素会紧跟在前一个浮动元素旁边；空间不足时会移动到下一行。浮动元素并不是任意“自由移动”，它仍然受到包含块、边距和其他浮动元素的限制。

行内元素遇到浮动

普通非替换行内元素通常不能直接设置 width 和 height，但设置 float 后会发生 blockification（块化），其布局表现会类似块级盒，因此原本看不见的尺寸可能重新出现：

.item {
  width: 100px;
  height: 100px;
  float: left;
}

float 的主要作用

1. 文字环绕：文字行盒会为浮动元素让出空间；
2. 脱离普通流：浮动盒不再按照普通块布局占据原来的块级位置；
3. 横向排列：多个浮动盒在空间足够时可以并排；
4. 获得块盒能力：浮动元素会发生块化，通常可以设置宽高；
5. 不适合使用 margin: 0 auto 居中：浮动盒的自动水平外边距不会像普通块盒那样实现常规居中，应使用 Flexbox、Grid 或其他布局方式。

浮动并不是绝对定位。它仍然会影响行内内容，也会受到其他浮动元素和包含块边界的影响。

浮动导致的高度塌陷

浮动元素脱离普通流后，如果父容器中只有浮动子元素，父容器在计算自身高度时可能没有可参与普通流高度计算的内容，于是出现看起来没有包裹子元素的现象，这就是常说的“高度塌陷”。

.container {
  width: 90%;
  border: 2px solid black;
}

.floating {
  width: 200px;
  height: 100px;
  float: left;
  background: #f78989;
}

<div class="container">
  <div class="floating">
    <h1>float left</h1>
  </div>
</div>

清除浮动的方法

下面使用一个合法的列表结构作为示例。<ul> 的直接子元素应当是 <li>，不能直接放置 <div>：

<div class="container">
  <ul class="float-list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <div class="text">under</div>
</div>

* {
  box-sizing: border-box;
}

.float-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.float-list li {
  width: 200px;
  height: 100px;
  float: left;
}

.float-list li:nth-child(1) {
  background: #ef4949;
}

.float-list li:nth-child(2) {
  background: #ffff5f;
}

.float-list li:nth-child(3) {
  background: #59ffde;
}

.text {
  width: 100px;
  height: 150px;
  background-color: #0092b3;
}

设计上希望蓝色的 under 色块位于三个浮动色块下方，但由于三个 li 都设置了左浮动，后续普通块可能上移或与浮动区域重叠。下面介绍几种处理方式。

1. 给父容器设置固定高度（不推荐）

给父容器设置固定高度可以在内容尺寸已知时暂时达到效果：

.float-list {
  height: 100px;
}

这种方法简单直接，但不适合响应式内容。当子元素高度变化或内容超出固定高度时，可能产生溢出或再次出现布局问题。

2. 在浮动元素后添加新元素并清除浮动

可以在浮动列表后添加一个空的块级元素，并使用 clear: both 让它移动到浮动元素下方：

<ul class="float-list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

<div class="clearfix" aria-hidden="true"></div>
<div class="text">under</div>

.clearfix {
  display: block;
  clear: both;
}

这种方式可以让后续内容避开浮动，但会增加没有语义的空元素，因此现代项目通常更倾向于使用伪元素或 flow-root。

3. 在容器的伪元素上清除浮动

可以给容器添加伪元素，让伪元素作为最后一个块级盒清除浮动：

.float-list::after {
  display: block;
  clear: both;
  content: '';
}

这种方法不会增加额外的 HTML 元素，是传统 clearfix 技巧的常见写法。也可以使用 display: table，但现在更推荐 display: flow-root。

4. 在受浮动影响的后续元素上使用 clear（有条件使用）

如果只是希望某一个后续元素移动到浮动元素下方，可以在该元素上使用 clear：

.text {
  width: 100px;
  height: 150px;
  clear: both;
  background-color: #0092b3;
}

这种方法本身是有效的，但它只影响当前后续元素，不会让父容器自动包裹浮动子元素。如果布局责任属于父容器，应该在父容器上处理。

clear 主要作用于后续的块级盒，并且只会处理同一个 BFC 中相关方向上的浮动；它不是全局的“清除所有浮动”开关。

5. 使用 BFC 包含浮动（重要）

让浮动元素所在的父容器建立新的块级格式化上下文，可以使父容器计算时包含内部浮动。现代 CSS 推荐使用 display: flow-root：

.float-list {
  display: flow-root;
}

flow-root 会创建一个新的 BFC，不需要额外的空元素，也不会像 overflow: hidden 那样意外裁剪内容。

原文中的 display: flex 不是严格意义上的 BFC 清除写法。Flex 容器会把子元素变成 flex item，浮动属性对 flex item 不再按普通浮动方式工作。如果确实要使用 Flexbox，应直接移除 float，使用 gap、flex-wrap 等属性完成布局。

什么是 BFC？

BFC（Block Formatting Context，块级格式化上下文） 是一个独立的块级布局环境。一个 BFC 内部的布局会按照块格式化规则进行，并与外部布局形成一定的隔离。

BFC 的常见特点包括：

1. BFC 会包含内部的浮动元素，父容器可以把这些浮动元素纳入高度计算；
2. BFC 可以把内部布局与外部浮动隔离：在同一个 BFC 中，建立 BFC 的块盒不会与外部浮动的边界重叠；空间足够时可以排在浮动旁边，不足时会移动到浮动下方；
3. BFC 的边界可以阻止部分父子元素之间的外边距折叠；
4. 同一个 BFC 内的块级盒通常会沿块方向依次排列；
5. BFC 不是万能的隔离层，BFC 自身的尺寸、外边距和位置仍然会参与外部布局。

常见的 BFC 触发条件

常见情况包括：

1. 根元素；
2. 浮动元素：float: left、float: right 等；
3. 绝对定位元素：position: absolute、position: fixed；
4. display: flow-root；
5. display: inline-block、table-cell、table-caption 等特定布局盒；
6. overflow 不是 visible 或 clip 的块容器，例如 hidden、auto、scroll；
7. contain: layout、contain: content 或 contain: paint；
8. 某些 flex item、grid item 和多列布局容器会建立独立的格式化上下文，但不能简单等同于“设置 display: flex 的元素就是 BFC”。

BFC、Flex 格式化上下文和 Grid 格式化上下文

display: flex 创建的是 Flex formatting context，display: grid 创建的是 Grid formatting context，不应直接回答为“创建了 BFC”。它们都能对内部布局形成隔离，并且 Flex/Grid 容器的子项不会按普通浮动规则排列；但这是对应布局模型的结果，不等同于传统块格式化上下文。

另一方面，某些 flex item 或 grid item 在满足规范条件时自身可以建立 BFC。判断一个盒子是否建立 BFC，应看它的实际 display、布局角色和其他属性，而不要只看它是否处于 Flex 或 Grid 布局中。

如果目标只是让普通块容器建立 BFC 并包含浮动，display: flow-root 通常是最直接、语义最明确的选择。

overflow 清除浮动的传统写法

以下写法可以创建 BFC，并让父元素包含浮动子元素：

.float-list {
  overflow: hidden;
}

但它可能裁剪阴影、下拉菜单或超出容器的内容；使用 overflow: auto 或 scroll 还可能产生滚动条。因此，现代项目更推荐：

.float-list {
  display: flow-root;
}

浮动与现代布局的选择

浮动最适合的场景仍然是“文字环绕图片”：

.article-image {
  width: 240px;
  margin: 0 1rem 0.5rem 0;
  float: left;
}

如果目标是构建页面、导航栏、卡片列表或复杂组件布局，应优先使用 Flexbox 或 Grid：

.card-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

常见面试回答要点

如果面试官问“什么是 BFC”，可以从以下几个方面回答：

1. BFC 是独立的块级格式化上下文；
2. BFC 内部的布局与外部有一定隔离；
3. BFC 可以包含内部浮动，解决父容器高度塌陷；
4. BFC 可以阻止部分外边距折叠和外部浮动侵入；
5. display: flow-root 是现代、语义明确的创建 BFC 方式；
6. 不能把 display: flex 简单等同于 BFC；
7. 页面整体布局应优先使用 Flexbox 或 Grid，浮动主要用于文字环绕等场景。

结语

浮动（Float）是一种重要的 CSS 布局机制，最初主要用于实现文字环绕图片。它可以脱离普通流、在空间足够时横向排列，并让行内内容为浮动元素让出空间。

浮动的主要问题是：后续普通流内容可能与浮动区域重叠，父容器也可能因为没有包含浮动而出现高度塌陷。传统项目可以使用额外清除元素、伪元素或 overflow 解决；现代项目更推荐使用 display: flow-root 建立 BFC，或者直接使用 Flexbox 和 Grid 重构布局。

理解块级盒、行内盒、行内块、浮动、普通流和 BFC 的关系，可以更准确地解释常见布局现象，也能避免把历史经验误认为 CSS 规范中的绝对结论。

参考资料

• MDN：浮动
• MDN：块级格式化上下文
• MDN：float
• MDN：clear
• MDN：flow-root
• CSS Display Module Level 3
• CSS 2.1：Visual formatting model
• MDN：<ul> 元素