父盒子突然变扁？深扒 CSS 浮动清除的那些坑

深夜改页面，刷新浏览器发现页脚突然“贴脸”，跑到内容区域半中间去了。这种场景相信不少开发者都遇到过。罪魁祸首往往就是那个经典的 CSS 特性：浮动（float）。

很多教程只告诉你“要用清除浮动”，却很少说清楚为什么要清。当子元素设置 float 后，它们就脱离了正常的文档流，相当于把身体从原来的盒子里抽出去了。父容器是个老实人，它看不见这些飘出去的孩子，以为自己是空的，于是高度直接塌缩成零。这就好比你在箱子里塞了一堆悬浮的气球，箱子底部检测不到重量，盖子自然就掉下来了。

这时候，最简单的补救办法莫过于给父元素加个 overflow: hidden。这行代码能强制触发块级格式化上下文（BFC），让父盒子重新计算高度，把漂浮的子元素包含进来。操作极其简单，一行代码解决问题。但副作用也很明显，如果你的设计里有下拉菜单、气泡提示或者绝对定位的元素需要超出父容器显示，这条规则会无情地把多余部分裁剪掉，导致用户体验出现大窟窿。

如果不想牺牲布局的灵活性，clearfix 方案才是正解。它的核心思路是在容器内部通过伪元素生成一个看不见的“幽灵”块，专门用来对抗浮动的影响。通常我们在 .clearfix 类的 ::after 中写入内容，设置为 table 显示类型并执行 clear: both。这段代码就像在浮动元素的末尾强行插了一个回车，告诉浏览器：“不管前面怎么飘，到这里都要回到正常流程里来”。

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

配合这个类使用，既能保持 HTML 结构纯净，避免像过去那样塞入无意义的空标签，又能完美撑开父容器高度，是维护旧项目时的首选工具。

当然，老生常谈的问题依然存在：真的还需要用浮动做布局吗？ 回想一下，浮动最初的设计初衷只是为了实现文字环绕图片的效果，拿来做整页布局本就是歪打正着。现在有了 Flexbox 和 Grid，我们完全没必要再跟文档流较劲。对于一维排列，用 display: flex 能让父元素自动适应子项高度；对于二维网格，grid-template-columns 更是直观高效。新项目的架构应当优先拥抱现代标准，除非是在修补十年前的遗产代码，否则别再为了布局去折腾浮动了。

掌握清除浮动，本质上是为了读懂那些遗留系统里的逻辑陷阱。当我们明白 BFC 的隔离原理，以及伪元素如何干预渲染树时，处理这类布局问题时心里会有底。技术迭代很快，但底层逻辑相通。知道“为什么错”，比盲目照抄“怎么改”更重要。下次遇到盒子塌陷，先别急着加样式，想想是不是该换个更适合的布局模式了。