overflow: visible无法修复浮动导致的圆角边框异常，因其不触发bfc且父容器高度塌陷为0，使border-radius无渲染基础；应优先使用display: flow-root创建bfc并正常包裹浮动元素，兼顾兼容性与无副作用。
overflow: visible 不能修复浮动导致的圆角边框被截断——它反而会让问题更明显。 因为父容器高度塌陷后，border-radius 是画在一条“看不见的线”上，overflow: visible 只是放任子元素彻底溢出，圆角区域根本没被渲染出来，不是“被截断”，而是“压根没生成”。
为什么 overflow: visible 看起来更糟
当浮动子元素脱离文档流，父容器计算高度为 0，此时：
• border-radius 作用于一个 0 高度的盒模型，视觉上等于没有边框
• overflow: visible（默认值）不触发 BFC，也不撑高父容器，子元素直接从父容器顶部“捅出来”
• 圆角区域被内容覆盖或完全不可见，调试时甚至看不到 border 的影子
真正该用的替代方案：display: flow-root
这是现代项目中最干净、无副作用的解法：
• display: flow-root 明确创建 BFC，让父容器正确包裹浮动子元素，高度恢复正常
• 不裁剪任何内容，box-shadow、下拉菜单、transform 元素全部照常显示
• 兼容性足够：Chrome 64+、Firefox 58+、Edge 79+、Safari 12.1+（2026 年已全覆盖）
• 语义清晰，后续维护者一眼能懂“这是为了包裹浮动”，而不是猜 overflow 的意图
如果必须兼容 IE 或老浏览器
退而求其次，用伪元素清除浮动，比硬加 overflow: hidden 更可控：
• 给父容器添加 .container::after { content: ""; display: table; clear: both; }
• 必须写 content: ""，否则伪元素不渲染
• display: table 比 block 更稳妥，避免某些旧版浏览器中仍不撑高
• 不新增 DOM 节点，不污染语义，IE8+ 全支持
为什么 overflow: hidden 是危险的“快捷键”
它看似让圆角“回来了”，但埋了多个雷：
• 下拉菜单、Tooltip、弹层被意外裁剪，且 DevTools 很难定位（因为裁剪发生在合成层）
• box-shadow 默认不受 overflow: hidden 影响，得换 filter: drop-shadow() 才行
• 若父容器本应滚动，overflow: hidden 直接禁用，且无法通过子元素 overflow-y: auto 补救
• 在部分 Safari 版本中，overflow: hidden + border-radius 组合可能引发重绘闪烁或锯齿
最常被忽略的一点：目标从来不是“清除浮动”，而是“让父容器拥有正确的渲染区域”。用 flow-root 或直接改用 display: flex，比反复在 overflow、clear、zoom 之间打补丁要可靠得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
