overflow:hidden不能清除浮动，仅通过触发BFC隐藏视觉溢出；真正清除需clear:both或::after伪元素；推荐优先使用display:flow-root。
overflow:hidden 真的能清除浮动吗？
不能。它只是让容器“假装看不见”溢出的浮动元素，靠触发 BFC 隐藏了视觉上的溢出，但浮动本身没被清除——float 依然生效，后续普通流元素仍会绕行（如果容器高度塌陷已修复，这点才不明显）。
常见错误现象：overflow:hidden 加了，父容器高度恢复了，但紧挨着它的下一个 <div> 文字还是从浮动元素右侧开始排版。
<ul>
<li>这是典型的“视觉清除 ≠ 行为清除”，浮动脱离文档流的本质没变</li>
<li>真正需要“清除后续流布局受干扰”，得用 <code>clear:both 或伪元素 ::after 清除
overflow:hidden 的副作用：隐藏溢出内容、禁用滚动（除非显式设 overflow:auto 或 scroll）BFC 触发条件里，overflow:hidden 最常用但最危险
触发 BFC 是它修复父容器高度塌陷的根本原因，但 overflow:hidden 是所有触发方式中兼容性好却副作用最强的一个。
- IE6/7 不支持 BFC 概念，但意外地把
overflow:hidden当作 layout 触发器，所以能“凑合用” - 现代浏览器中，
overflow:hidden会剪裁position: absolute超出容器的部分（比如下拉菜单、tooltip），而display: flow-root不会 - 替代方案优先级建议：
display: flow-root>overflow:auto>overflow:hidden（仅当确定无溢出内容时）
display: flow-root 是更干净的替代写法
它是专为解决这个问题设计的 CSS 属性，语义清晰、无副作用，2018 年起主流浏览器已稳定支持。
立即学习“前端免费学习笔记（深入）”；
- 写法简单：
display: flow-root直接让容器成为 BFC 根，包裹内部浮动，撑开高度，不影响绝对定位子元素 - 兼容性注意点：IE 全系不支持；如需兼容 IE11，可用
@supports (display: flow-root)进行渐进增强 - 和
overflow:hidden对比：display: flow-root不改变溢出行为（默认仍是 visible），也不影响滚动逻辑
伪元素清除法 still works，且更可控
如果你必须兼容老浏览器，或想明确表达“这里要清除浮动”，用 ::after 伪元素仍是首选。
- 标准写法：
.clearfix::after { content: ""; display: table; clear: both; } - 关键点：
display: table（或block）确保伪元素参与块格式化上下文，clear: both才真正阻断浮动影响 - 容易踩的坑：漏写
content: ""（伪元素不渲染）、用display: inline（clear 失效）、父容器设了height固定值（掩盖了塌陷问题，误以为清除成功）
