CSS 清除浮动怎么写？附 3 种常见方法一次讲清

清除浮动最常用、也最稳妥的做法，是给浮动的父元素加一个 ::after 伪元素并写 clear: both，也就是前端圈常说的 clearfix 写法：它不挑场景、不带来副作用，几乎能应付所有浮动塌陷。所谓浮动塌陷，就是父容器里的子元素全部浮动后脱离文档流，父容器高度被算成 0，背景边框错位、后续内容顶上来。本文把 clear: both、overflow:hidden、以及伪元素 clearfix 三种主流方案一次讲透，并告诉你什么时候该用哪一个、又有哪些一眼看不出的坑。读完你不仅能让父容器正确撑开高度，还知道每种写法背后的原理，以后遇到浮动布局再也不用靠猜。今天编程狮就把这块讲明白。

CSS 清除浮动方法图

一、为什么会有浮动塌陷

要讲清除浮动，得先搞懂它要解决的问题：浮动塌陷。当一个父容器里所有子元素都设了 float: left 或 float: right，这些子元素就脱离了普通文档流，父容器在计算高度时会「看不见」它们，于是父容器高度塌成 0，后面的内容会直接顶上来，布局全乱。

浮动原本的设计目的，是让文字环绕图片，属于图文混排的排版手段，并不是为了做整体布局。可早期没有 flex、grid 这些现代布局工具，大家就拿浮动来拼两栏、三栏。副作用就是父容器塌陷。理解这个来龙去脉，有助于你看懂后面每种清除手法的差别。想系统复习浮动属性的方方面面，可以看 CSS 基础教程。

⚠️ 注意：浮动塌陷不是报错，而是「高度计算结果为 0」。页面看起来没崩，但背景、边框、外边距全错位，是最难一眼定位的布局 bug 之一。

判断要不要清除浮动，先看父容器里是不是「全是浮动子元素」：只要有一个没浮动的、普通流里的子元素撑着高度，父容器就不会塌陷；一旦子元素全部脱流，就必须手动闭合浮动。另外，浮动元素还会影响兄弟元素的文字环绕，这和塌陷是两件事，别混为一谈。理清成因，下面的三种方法才用得明白。

二、方法一：clear:both（最直接）

clear: both 是最直白的清除方式：在某个元素上写 clear: both，就告诉浏览器「这个元素左边和右边都不能有浮动」，于是它会被挤到所有浮动元素的下方，顺带把父容器高度撑开。

.clear {
  clear: both;
}

用法通常是在浮动子元素后面，额外放一个空的块级元素（比如 <div class="clear"></div>），给它 clear: both。父容器遇到这个「挡板」，就会把高度算到挡板为止，塌陷随之消失。

这种写法胜在「一看就懂」，不依赖任何黑魔法。但它要在 HTML 里塞一个无语义的空标签，污染结构；而且浮动子元素很多时，你得在每个该挡的位置都加挡板，维护麻烦。浮动最早为图文混排设计，理解这点有助于看懂 HTML 布局基础，看清它和现代布局的本质区别。实际项目里，clear:both 更适合「临时救场」，不该作为长期方案。

三、方法二：overflow:hidden（触发 BFC）

第二种思路换个角度：不让父容器去「挡」浮动，而是让父容器自己「包住」浮动。给父容器加 overflow: hidden（或 overflow: auto），会触发 BFC（块级格式化上下文），BFC 有一条规则——内部的浮动元素也参与高度计算，于是父容器自然撑开了。

.parent {
  overflow: hidden;
}

相比塞空标签，overflow:hidden 不用动 HTML 结构，一行 CSS 解决，非常省事。它特别适合「父容器本身就该裁剪溢出内容」的场景，比如图片列表、卡片容器。

但坑也明显：overflow:hidden 会裁掉超出父容器的内容。如果你本来就想让子元素溢出显示（比如下拉菜单、阴影、tooltip），它们会被无情切掉。此外 overflow: auto 可能在内容刚好溢出时冒出滚动条。所以这条方案只在该裁就裁时用，否则宁可换别的。把 BFC 当成「副作用」来用，就得接受它的副作用。

四、方法三：伪元素 clearfix（最通用）

第三种，也是今天最推荐的做法：用伪元素 ::after 在父容器内部「自动」生成一块挡板，等价于方法一的空标签，但 HTML 干干净净。这就是经典的 clearfix，很多 CSS 框架都内置了它。

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

给需要闭合浮动的父容器加 class clearfix 即可。伪元素 ::after 默认插在内容末尾，设成块级再 clear: both，父容器高度就被正确撑起。因为挡板是 CSS 生成的，HTML 里一个额外标签都不用写，结构和样式彻底解耦。

clearfix 之所以成为业界标配，是因为它零副作用：不裁内容、不冒滚动条、不依赖 HTML 改动，几乎所有浮动塌陷都能解。如果你懒得记前面两种的取舍，记住「父容器加 clearfix」基本不会错。唯一要留意的，是伪元素必须 display: block（或 table），设成 inline 就不生效。理解清楚 clearfix 的原理，你就握住了闭合浮动的万能钥匙。

五、三种方法怎么选 + 常见坑

三种方案一句话总结：临时救场用 clear:both，该裁溢出用 overflow:hidden，长期通用用 clearfix。下面三个坑最高频：

空标签忘了写 clear：塞了 <div class="clear"> 却漏掉 CSS 里的 clear: both，挡板不生效，塌陷依旧。
overflow 误伤内容：用 overflow:hidden 想撑高度，结果下拉菜单、阴影被裁掉，以为是别的 bug。
伪元素没设块级：clearfix 的 ::after 写成 display: inline，clear 失效，父容器还是 0 高。

选型的边界记牢：clear:both 适合演示和一次性修复；overflow:hidden 仅在你能接受裁剪时使用；其余情况一律 clearfix。另外，现代布局能用 flex、grid 就别用浮动，浮动本就不是为整体布局生的，能避开塌陷的根源最好。把「成因→手法→取舍」这条线理清，浮动布局再也拦不住你。

CSS 清除浮动怎么选

总结

清除浮动，日常首选 clearfix（给父容器加 ::after 伪元素并 clear: both），零副作用、最通用；需要顺带裁剪溢出内容时，用 overflow:hidden 触发 BFC；只是临时演示或快速救场，clear:both 加个挡板也行。要点带走：

浮动塌陷的根源是「子元素全部脱流，父容器高度算成 0」；
overflow:hidden 会裁掉溢出内容，下拉菜单、阴影要小心；
clearfix 的伪元素必须 display: block，否则 clear 不生效。

延伸学习

想把这块知识系统补齐，可以按这个顺序来：

先过一遍 HTML + CSS 进阶实战，理解脚本如何动态切换浮动类；
想看另一种讲法，参考 CSS 浮动清除笔记的实战思路；
写完想立刻试，在线运行 CSS 代码免安装跑片段。

常见问题

Q：clear:both 和 clearfix 有什么区别？

A：clear:both 是属性本身，要生效得在 HTML 里放一个元素（通常是空 div）来当挡板；clearfix 是用 ::after 伪元素在 CSS 里自动生成那块挡板，效果一样，但 HTML 不用塞无语义标签。所以 clearfix 是 clear:both 的「无污染」封装版，日常更推荐。

Q：为什么用了 overflow:hidden 高度撑开了，内容却被切掉？

A：overflow:hidden 触发了 BFC，让父容器把浮动子元素算进高度，所以高度撑开；但它同时会裁剪超出父容器的内容。如果你有下拉菜单、阴影、tooltip 这类需要溢出的元素，它们会被裁掉。这种情况应改用 clearfix，而不是 overflow:hidden。

Q：现代布局还需要清除浮动吗？

A：如果你用 flex 或 grid 做整体布局，基本不需要浮动，自然也没有塌陷问题。但很多老项目、第三方组件仍用浮动，遇到父容器高度异常时，加一个 clearfix 仍是最稳的修法。理解它，是为了在老代码里快速定位和解决布局错乱。