浮动元素不占布局高度，父容器会塌成零高。新代码可以选 flex 与 grid，但图文混排与老项目里 float 仍在用，清除方式的差异会在断点调整时集中暴露。
四种方案的取舍
| 方案 | 写法 | 副作用 | 适用场景 |
|---|---|---|---|
| 空标签 clear | 浮动元素后插入带 clear 的占位元素 | 多一个无语义节点，模板难以维护 | 临时修补 |
| overflow 触发 BFC | 父级 overflow: hidden 或 auto | 溢出内容被裁剪，焦点轮廓可能被截掉 | 内容确定不外溢 |
| clearfix 伪元素 | 父级 ::after 声明 clear | 伪元素沿用 display: table 时跨断点表现不稳 | 需要兼容旧版本浏览器 |
| display: flow-root | 父级一行声明 | iOS Safari 15.2 及更早版本不支持 | 现代浏览器优先 |
推荐写法
.clearfix::after {
content: "";
display: block;
clear: both;
}
.row { display: flow-root; }
clearfix 的伪元素显式写成 display: block 而不是 table，跨断点时高度最稳。
选型顺序
- 先判断是否还需要 float。多列等高排列交给 flex 或 grid，源头不需要清除。
- 必须保留浮动时，给父级加 display: flow-root。
- 需要覆盖旧版 iOS 的项目，改用 clearfix 伪元素并显式写 display: block。
- 只有内容确定不会溢出的容器，才用 overflow: hidden。
断点中的坑
- 断点切换后浮动换行，只对最后一行做清除会得到错的高度；
- overflow: hidden 在窄屏下会裁掉下拉菜单与提示气泡；
- clearfix 伪元素保持 display: table 时，部分浏览器会给容器加上额外基线高度；
- 父级高度依赖浮动子项时，字号变化引起换行，会连带改变容器高度。
判断标准
出现高度塌陷先问一句该不该用浮动：文字环绕图片的场合 float 仍是对的解法，调整清除方式即可；多行多列的整体布局改用 flex 或 grid，浮动带来的清除问题随之消失。