浮动是 CSS 布局中历史悠久的特性，最初用于实现图文混排。给元素设置 float:left 或 float:right 后，该元素会脱离正常文档流，向指定方向移动，直到遇到父容器边界或另一个浮动元素。这种脱离会造成父元素无法感知子元素的实际高度，从而出现高度塌陷。当父元素依赖内容高度来显示背景色、边框或内边距时，视觉问题会非常明显，后续的普通块级元素也可能因此产生位置错乱。清除浮动的本质并不是删除 float 属性，而是让父容器重新包裹浮动子元素，或者让后续元素正确避开浮动区域。下面将系统说明几种常见且实用的清除浮动方案。
浮动为何导致父容器高度塌陷
在标准文档流中，块级元素的高度由自身内容或者子元素撑开。浮动元素比较特殊，它虽然仍然占据水平空间，但已经不再参与父元素的高度计算。也就是说，如果一个父元素内部只有浮动子元素，而没有普通流内容或显式高度，浏览器会认为这个父元素的高度为 0。
以下是一个典型的高度塌陷示例。父容器 <div> 包含两个分别向左和向右浮动的子元素，父元素本身没有设置高度，只设置了边框和背景。由于两个子元素都离开了文档流，父元素最终只显示为一条上下边框重叠的线，背景也无法覆盖子元素区域。
<div class="box"> <div class="left">左侧内容</div> <div class="right">右侧内容</div> </div> <p>这是浮动元素后面的普通内容</p>
.box {
border: 2px solid #333;
background: #f5f5f5;
}
.left {
float: left;
width: 45%;
height: 120px;
background: #9ec5fe;
}
.right {
float: right;
width: 45%;
height: 120px;
background: #f8c8dc;
}
运行这段代码后可以看到，父元素 <div class="box"> 的边框并没有包裹住左右两个彩色区域，而是缩成了一条线。后面的 <p> 内容也可能直接顶到浮动元素旁边，造成阅读或对齐问题。理解这个现象是掌握清除浮动的前提。
使用 clear:both 清除浮动
clear 属性用于指定元素哪一侧不允许出现浮动元素，常见取值有 left、right、both 和 none。当给一个块级元素设置 clear:both 时，浏览器会把这个元素放置在左右两侧所有浮动元素的下方，从而间接撑开父容器，或者让后续内容恢复正常排列。
传统做法是在浮动元素后面添加一个空的 <div>，并为它设置清除样式。这种方式简单直接，不需要太多 CSS 知识就能实现。
<div class="box"> <div class="left">左侧内容</div> <div class="right">右侧内容</div> <div class="clear"></div> </div> <p>这是浮动元素后面的普通内容</p>
.clear {
clear: both;
height: 0;
overflow: hidden;
}
这样做的效果很明显，父容器的高度会被空 <div> 撑开，背景和边框恢复正常。不过它的缺点也很突出：为了清除浮动而额外添加一个无语义的空标签，会增加 HTML 结构的冗余。如果页面中存在大量浮动布局，维护起来会非常麻烦，尤其是需要反复添加这种空元素时，代码的整洁度和可读性都会下降。
除此之外，也可以直接给浮动元素后面的兄弟元素设置 clear:both。例如在上面的例子中，如果不希望后面段落贴到浮动区域，可以直接让 <p> 使用清除样式。但这样不一定能解决父容器高度塌陷问题，因此更常见的做法还是配合其他方案一起使用。
利用 BFC 清除浮动
BFC 即块级格式化上下文，是一种独立的渲染区域。处于 BFC 内部的元素，其布局不会影响到外部元素，同时 BFC 在计算高度时会把内部的浮动元素也包含进去。因此，只要让父容器形成 BFC，就能自动清除内部浮动，无需添加额外标签。
最常用的创建 BFC 方式是给父容器设置 overflow:hidden、overflow:auto 或 overflow:scroll。其中 overflow:hidden 对布局影响最小，使用最为广泛。
.box {
border: 2px solid #333;
background: #f5f5f5;
overflow: hidden;
}
这种方式代码非常简洁，只需要父容器一个属性就能清除浮动。但它有一定副作用：overflow:hidden 会裁剪超出父容器边界的内容。如果布局中包含下拉菜单、提示气泡、阴影或者刻意超出容器的装饰元素，这些内容可能会被隐藏。因此在使用前需要确认父容器内部是否存在溢出显示需求。
现代浏览器提供了更专门的属性 display:flow-root。它可以在不产生额外副作用的情况下创建 BFC，专门用于解决浮动引起的塌陷问题。兼容性方面，除了一些较旧版本的浏览器外，目前主流环境都可以正常使用。
.box-modern {
display: flow-root;
}
相比之下，display:flow-root 比 overflow:hidden 更语义化，也不会误伤溢出内容。对于不需要兼容旧版浏览器的项目，可以优先考虑使用它来清除浮动。
clearfix 伪元素方案
clearfix 是一种借助伪元素清除浮动的经典方案。它的主要思路是在父容器上使用 ::after 伪元素生成一个块级空内容，并对其应用 clear:both。这样既能达到清除浮动的目的，又不会在 HTML 中引入额外的无语义标签。
最基础的 clearfix 写法如下。
.clearfix::after {
content: "";
display: block;
clear: both;
}
.clearfix {
zoom: 1;
}
其中 zoom:1 是为了兼容旧版 IE 浏览器，现代项目如果不需要考虑这些浏览器，可以省略。将 clearfix 类添加到父容器上，即可完成浮动清除。它的优点是 HTML 结构保持干净，CSS 也可以统一复用，适合用在组件库或长期维护的项目中。
还有一种更健壮的写法，同时使用 ::before 和 ::after，并将 display 设置为 table。这样可以防止父子元素之间的外边距合并问题。
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
这种写法虽然在代码量上稍多一点，但能兼容更多边距场景。总体而言，clearfix 是清除浮动方案中平衡性最好的一种：不需要修改 HTML 结构、不会产生额外裁剪副作用、复用方便，多年来一直被前端开发者广泛使用。
使用 Flexbox 与 Grid 替代浮动
如果项目不需要兼容非常老旧的浏览器，完全可以从源头避免使用浮动来构建整体布局。CSS 的 Flexbox 和 Grid 布局系统可以更直观地实现横向排列、多列布局等效果，而且父容器会自动包含子元素高度，不存在浮动塌陷问题。
以下是一个使用 Flexbox 实现三列卡片布局的示例，不需要任何清除浮动的额外代码。
<div class="card-row"> <div class="card">卡片 1</div> <div class="card">卡片 2</div> <div class="card">卡片 3</div> </div>
.card-row {
display: flex;
gap: 16px;
}
.card {
flex: 1;
padding: 20px;
background: #dbeafe;
border: 1px solid #64748b;
}
使用 Grid 布局同样简单，只需要在父容器上设置 display:grid，再通过 grid-template-columns 定义列宽即可。这两种布局方式都能让子元素自然参与父容器高度计算，避免传统浮动带来的高度塌陷、清除浮动、外边距重叠等问题。
不过，浮动也并非完全无用。在图文混排、首字下沉、旧版邮件模板或必须兼容老旧浏览器等特殊场景中，float 仍然是有效方案。因此理解并掌握清除浮动的原理，对阅读和维护旧项目仍然很有价值。实际开发中应根据项目兼容性要求、内容溢出情况以及团队维护习惯，从 clear:both、BFC、clearfix 或现代布局中选择最合适的方式。
清除浮动clear both布局修复修改时间：2026-08-22 22:36:03