overflow:hidden并非清除浮动，而是触发BFC使父容器包含浮动子元素并撑开高度，但会强制裁剪所有溢出内容；现代推荐使用display:flow-root替代，语义清晰且无裁剪副作用。
overflow: hidden 能“撑开父容器高度”，不是因为它“清除了浮动”，而是它触发了 BFC，让父容器重新把浮动子元素算进高度计算里——这是最常被误解的起点。
为什么 overflow: hidden 会意外裁剪内容
它触发 BFC 的同时，会强制裁剪所有溢出区域：下拉菜单、tooltip、阴影、transform 平移后的部分，只要超出容器边界，一律不可见。这不是副作用，是规范行为。
- 常见错误现象：
overflow: hidden加完后，悬停弹出的菜单突然消失、卡片阴影被截断、position: absolute子元素边缘被切 - 使用场景：仅适用于你明确不需要任何溢出内容的简单容器（比如纯色背景+固定尺寸子项）
- 性能影响：现代浏览器对
overflow: hidden的渲染优化较好，但若容器内有大量动画或滚动内容，仍可能触发额外的合成层和 repaint
display: flow-root 是更干净的替代方案
它专为创建无副作用 BFC 而生，语义清晰、零裁剪、不干扰子元素的 float 或 position 行为。
- 兼容性注意：
display: flow-root在 Chrome 64+、Firefox 59+、Safari 15.4+ 已稳定支持；IE 完全不支持 - 若需兼容 IE，回退方案优先选伪元素
::after+clear: both，而非overflow: hidden（避免裁剪风险） - 它不改变文档流，不影响 flex/grid 等现代布局的嵌套逻辑，可安全用于组件封装
BFC 内部依然会发生 margin 塌陷
BFC 只阻断「跨边界」干扰，不消除「内部」的 margin 合并规则。父子间上下 margin 仍会合并，哪怕父容器已设 display: flow-root。
立即学习“前端免费学习笔记（深入）”；
- 典型表现：父容器没边框/内边距，子元素设
margin-top: 20px，结果父容器顶部直接“透出”这 20px - 解决方式不是加 BFC 就万事大吉，而是要打断合并链：给父容器加
border-top、padding-top，或改用gap（flex/grid）替代 margin - 别指望
overflow: hidden或flow-root自动修复这个——它们只管“边界”，不管“内部缝合”
真正容易被忽略的，是 BFC 的“边界感”：它像一堵墙，隔开了内外，但墙里面该塌陷的还是会塌陷，该浮动的也照常浮动。用错地方，反而会让问题更隐蔽。
