CSS 中 `float` 引起的父元素高度塌陷问题（清除浮动）

Category（分类）: CSS, HTML Status: 已整理

float 最初主要用于实现文字环绕图片，后来也被大量用于传统的多栏布局。现代页面整体布局通常优先使用 Flexbox、Grid 和 flow-root，但在维护旧项目、实现文字环绕或理解 BFC 时，仍然有必要掌握浮动和清除浮动。

本文主要讨论：

浮动元素的布局特点；
为什么父元素的自动高度可能无法包裹浮动子元素；
清除浮动的常见方案；
BFC 与浮动、外边距折叠的关系；
现代项目更推荐的 display: flow-root 方案。

一、什么是浮动？

float 可以设置为：

.left {
  float: left;
}

.right {
  float: right;
}

浮动元素会脱离普通块布局，但不会像绝对定位那样完全不影响周围内容。后续的行盒和文本会围绕浮动元素排列，这正是浮动最初用于图文混排的原因。

<article>
  <img class="article-image" src="example.jpg" alt="文章配图">
  <p>
    这段文字会围绕左侧图片排列。浮动元素不再按照普通块盒顺序占据位置，
    但后续文本的行盒仍然会避开浮动区域。
  </p>
</article>

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

浮动元素的主要特点

浮动元素不再参与普通块盒的正常排列；
浮动元素会影响后续行盒，文字可以环绕它；
浮动元素会被块级化；
width: auto 时通常会根据内容进行收缩适应，但实际宽度还会受到父元素和最小/最大宽度影响；
高度仍然由内容、显式高度、内边距和边框决定；
浮动元素不会像普通行内块那样受到源码空白影响；
浮动元素的外边距通常不会与其他普通块盒发生常规外边距折叠。

浮动与 position: absolute 不能混为一谈：浮动会影响周围文本的排列，而绝对定位元素通常不会让文本环绕。

二、父元素为什么会高度塌陷？

看下面的结构：

<div class="box">
  <div class="left"></div>
  <div class="right"></div>
</div>

.box {
  width: 450px;
  padding: 5px;
  border: 1px solid #000;
}

.left,
.right {
  width: 100px;
  height: 100px;
  background: #f00;
}

.left {
  float: left;
}

.right {
  float: right;
}

父元素 .box 没有设置高度，且它的普通流中没有其他内容。由于两个子元素都是浮动元素，父元素的普通高度计算不会把它们作为普通流子元素计入，因此 .box 可能只剩下边框和内边距的高度。

浮动布局示例

浮动元素导致父元素高度不足

这不是父元素“完全管不了子元素”，而是普通块格式化上下文在计算自动高度时不会按普通流内容的方式包含浮动后代。浮动元素仍然受到父元素宽度、包含块和溢出规则影响。

父元素高度塌陷原理示意图

三、清除浮动的常见方案

方案一：给父元素设置固定高度

.box {
  width: 450px;
  height: 100px;
  padding: 5px;
  border: 1px solid #000;
}

固定高度解决高度不足

优点是简单直接，缺点是高度固定。当子元素尺寸、文字、字体或屏幕宽度发生变化时，内容可能溢出：

.box {
  min-height: 100px;
  height: auto;
}

min-height 只能提供最小高度，不能替代对浮动布局的包裹。如果内容高度完全动态，仍应使用 BFC、clearfix 或 flow-root。

固定高度对动态内容的限制

方案二：让父元素也浮动

.box {
  float: left;
}

浮动父元素会建立新的浮动格式化环境，通常能够包裹浮动子元素，但它自身也脱离普通流，并可能导致：

父元素宽度收缩；
后续兄弟元素位置变化；
外层父元素继续出现高度问题；
需要继续清除更外层的浮动。

因此这通常是“用另一个浮动解决当前浮动”的临时办法，不建议作为通用 clearfix 方案。

父元素也浮动后的布局

方案三：使用 `overflow` 建立 BFC

.box {
  width: 450px;
  padding: 5px;
  border: 1px solid #000;
  overflow: hidden;
}

overflow: hidden 会让元素建立新的块格式化上下文，从而在自动高度计算时包含浮动子元素。

也可以使用：

.box {
  overflow: auto;
}

但 auto 可能生成滚动条。hidden 则可能裁剪下拉菜单、阴影和其他溢出内容。

overflow 建立 BFC

如果内容中有很长且不可断开的英文字符串，overflow: hidden 可能把它裁剪掉。这不是 BFC 特有的问题，而是溢出裁剪的结果。可以考虑：

.text {
  overflow-wrap: anywhere;
}

长文本被裁剪的示意图

方案四：使用 `display: flow-root`

现代 CSS 更推荐：

.box {
  display: flow-root;
}

flow-root 会创建一个新的 BFC，同时不会像 overflow: hidden 那样默认裁剪溢出内容，也不会让父元素脱离普通流。

<div class="box flow-root-box">
  <div class="left"></div>
  <div class="right"></div>
</div>

.flow-root-box {
  display: flow-root;
  width: 450px;
  padding: 5px;
  border: 1px solid #000;
}

这是新项目中处理“父元素包裹浮动子元素”最清晰的方案之一。

方案五：给父元素设置固定高度或最小高度

如果设计本身规定了固定高度，可以直接设置：

.box {
  min-height: 100px;
}

但不要为了清除浮动而给内容不确定的容器硬编码高度。响应式页面尤其容易因为字体、文字和图片变化导致内容溢出。

固定高度方案的局限

方案六：在末尾添加清除浮动的空元素

clear 用于规定元素的哪一侧不能紧邻浮动元素：

<div class="box">
  <div class="left"></div>
  <div class="right"></div>
  <div class="clear"></div>
</div>

.clear {
  clear: both;
}

clear: both 会让这个块级元素移动到前面左右浮动元素的下方，从而使父元素的自动高度包含到它的位置。

clear 清除浮动的原理

优点是原理直观，缺点是增加了没有语义的空元素。额外增加一个空元素的性能成本通常很小，但会污染 DOM 结构和维护逻辑，因此现代代码一般使用伪元素或 flow-root。

添加空元素清除浮动

方案七：使用伪元素 clearfix

可以让伪元素代替空的清除元素：

<div class="box clearfix">
  <div class="left"></div>
  <div class="right"></div>
</div>

.clearfix::after {
  display: block;
  clear: both;
  content: '';
}

这是传统项目中非常常见的写法。伪元素生成一个位于父元素末尾的块级盒，并通过 clear: both 移到浮动元素下方。

伪元素清除浮动

早期 clearfix 写法还会写成：

.clearfix::before,
.clearfix::after {
  display: table;
  content: '';
}

.clearfix::after {
  clear: both;
}

其中 ::after 才负责清除浮动。::before 主要用于处理某些历史浏览器和首个子元素顶部外边距折叠问题，不是清除浮动的必要条件。

display: table 创建的是表格盒，不是匿名表格单元。现代项目通常可以直接使用简洁的 ::after 版本，或者使用 display: flow-root。

clearfix 的完整效果

四、浮动布局中的兄弟元素

“兄弟元素要么全都浮动，要么全都不浮动”不是 CSS 的硬性规则。浮动元素和普通流元素可以混合使用，例如图片浮动、文字环绕就是典型案例。

如果需要让普通流兄弟元素避开浮动区域，可以让该元素建立 BFC：

.float-image {
  float: left;
  width: 120px;
  margin-right: 1rem;
}

.text-content {
  display: flow-root;
}

如果是多栏布局，新项目应优先考虑 Flexbox 或 Grid，而不是强行混合多个浮动元素。

五、什么是 BFC？

BFC（Block Formatting Context，块格式化上下文）是一个独立的块级布局环境。BFC 内部的布局会按照自己的规则进行，外部元素不会直接参与其内部的块布局。

BFC 的重要表现包括：

BFC 内的块级盒通常沿块方向依次排列；
同一 BFC 中的相邻块级盒可能发生垂直外边距折叠；
BFC 通常会包含其内部的浮动后代，用于自动高度计算；
BFC 的内容区域通常会避开同一格式化上下文中的浮动元素；
BFC 与外部布局形成相对独立的格式化环境。

BFC 与浮动关系示意图

常见 BFC 触发条件

常见情况包括：

根元素；
float 不为 none 的元素；
position: absolute 或 position: fixed 的元素；
overflow 不为 visible 或 clip 的元素；
display: flow-root；
display: inline-block；
表格相关盒子，如 table-cell、table-caption、table、inline-table；
Flex 容器和 Grid 容器；
某些 contain 值，例如 contain: layout。

需要注意，触发 BFC 的方式可能会改变元素尺寸、溢出处理或普通流关系，不能只为了“触发 BFC”而随意使用 absolute、fixed 或 float。

六、利用 BFC 解决外边距折叠

相邻块级元素的上下外边距可能发生折叠：

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

.box2,
.box3 {
  width: 100px;
  height: 100px;
  background: #f00;
}

.box2 {
  margin-bottom: 10px;
}

.box3 {
  margin-top: 10px;
}

两个相邻外边距通常不会相加为 20px，而是按照折叠规则取较大值，通常表现为 10px。

更推荐的解决方式

不要为了阻止 margin 折叠而把 .box3 设置为浮动。可以使用父级的间距、内边距、边框或现代布局：

.stack {
  display: grid;
  gap: 10px;
}

也可以直接使用：

.box2 {
  margin-bottom: 20px;
}

.box3 {
  margin-top: 0;
}

如果确实需要把内容隔离在新的格式化环境中，可以使用合适的包装元素：

.section {
  display: flow-root;
  padding-block: 1px;
}

flow-root 主要解决格式化上下文和浮动包裹问题，但不应被描述为能够自动阻止所有相邻兄弟元素的外边距折叠。

外边距折叠示意图

使用布局间距解决外边距问题

七、BFC 与浮动元素不重叠

当一个元素浮动时，普通块盒可能出现在浮动元素下方，但它的行盒内容会避开浮动区域：

<div class="float-box"></div>
<div class="content-box">内容区域</div>

.float-box {
  float: left;
  width: 100px;
  height: 100px;
  background: #f00;
}

.content-box {
  width: 100px;
  height: 100px;
  background: #0a0;
}

如果希望内容区域整体避开浮动元素，可以让它建立 BFC：

.content-box {
  display: flow-root;
  background: #0a0;
}

也可以使用历史写法：

.content-box {
  overflow: hidden;
}

但 overflow: hidden 可能裁剪内容，现代项目优先考虑 flow-root。

浮动元素覆盖普通块盒的示意图

BFC 内容区域避开浮动元素

八、利用 BFC 包裹浮动子元素

BFC 在计算自身自动高度时，会将内部浮动后代纳入高度计算。因此下面的写法可以包裹浮动子元素：

.container {
  display: flow-root;
}