overflow:hidden 能“清除浮动”是因为触发bfc使父容器包含浮动子元素，而非真正清除；现代推荐用display:flow-root，兼容性好且无裁剪副作用。
overflow:hidden 为什么能“清除浮动”
它不是真的清除浮动，而是触发了 BFC（块级格式化上下文），让容器重新计算高度，把浮动子元素包进去。不加这个，父容器高度塌陷，后续元素就会飘到浮动元素旁边——不是错位，是父容器根本没“罩住”子元素。
常见错误现象：margin 不生效、背景色只显示一丁点、相邻区块叠在一起；使用场景多见于老式导航栏、图文混排卡片、侧边栏+主内容布局。
-
overflow:hidden必须作用在浮动元素的直接父容器上，套两层就失效 - 不能和
position: absolute或float同时用在同一个元素上，否则 BFC 可能不触发 - 如果子元素真有溢出内容（比如长文本没换行、绝对定位超界），
overflow:hidden会直接裁掉，不是“修复”，是“掩盖”
比 overflow:hidden 更稳妥的现代替代方案
现在主流项目基本不用 overflow:hidden 清浮动了，因为副作用太明显。更推荐用 display: flow-root——它是专为创建 BFC 设计的，不带溢出裁剪副作用。
兼容性注意：Chrome 64+/Firefox 58+/Edge 79+ 支持，IE 完全不支持；如果必须兼容 IE11，::after 伪元素 + clear:both 仍是首选。
-
display: flow-root和overflow:hidden效果一致，但不会隐藏溢出内容 -
clearfix类本质是：.clearfix::after { content:""; display:table; clear:both; } - Flex 或 Grid 布局下根本不需要清浮动——浮动本身在 flex item / grid item 内部就失效了
overflow:hidden 在响应式中容易被忽略的坑
加了 overflow:hidden 后，iOS Safari 滚动卡顿、固定定位元素（如 position:fixed 的弹窗）错位、甚至 transform 动画闪屏，都是真实发生过的。
根本原因是：浏览器为实现 overflow:hidden 会强制启用硬件加速层，但某些设备上调度失当，反而拖慢渲染。
- 移动端慎用，尤其在
body或整页容器上加overflow:hidden - 配合
touch-action: pan-y可缓解 iOS 滚动问题，但不能根治 - 如果只是想防止文字溢出容器，用
text-overflow:ellipsis+white-space:nowrap更精准
验证是否真需要清浮动：先看 DOM 结构
很多所谓“错位”，其实根本不是浮动导致的。比如用 inline-block 元素间有空白字符、Flex 子项 flex-shrink 被压缩、Grid 列宽写死但内容超长——这些跟浮动半毛钱关系都没有。
检查步骤很简单：打开开发者工具，选中“错位”的容器，在 Styles 面板里搜 float；如果没有 float:left/right/none，就别往清浮动上想。
- 浮动元素一定有
float声明，且父容器没有设置高度或 BFC - 用
getComputedStyle(el).float在控制台确认是否真浮动 - Chrome DevTools 的 Layout 标签页里勾选 “Show layer borders”，能直观看到哪些元素触发了新层——有助于判断是不是 BFC 问题
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
