应优先使用 display: flow-root 而非 overflow: hidden 解决圆角失效问题，因其创建 BFC 且不裁剪内容、无副作用；若必须用 overflow: hidden，需验证阴影、背景裁剪及实际溢出值。
直接加 overflow: hidden 能让圆角“看起来正常”，但大概率是治标不治本——它只是强行裁掉溢出部分，而不是真正修复渲染区域。真正的问题是父容器高度塌陷、没包裹住浮动子元素，border-radius 画在了 0 高度的线上。
为什么 overflow: hidden 看似有效但实际有风险
这个声明会触发 BFC，使父容器重新计算高度并包裹浮动子元素，同时裁剪所有超出内容边界的部分。表面看圆角“回来了”，但以下情况会立刻暴露问题：
- 下拉菜单、Tooltip、弹层等需要溢出显示的交互元素被意外截断
- 子元素用了
transform（比如translateY(-5px)）或position: absolute，可能因图层提升绕过裁剪，导致圆角区域仍被顶破 - 父容器本身有滚动需求（如长列表），
overflow: hidden会直接禁用滚动 - 某些旧版 Safari 中，
overflow: hidden+border-radius组合可能引发重绘异常，圆角边缘出现锯齿或闪烁
更稳妥的替代方案：display: flow-root
display: flow-root 是专为解决这类问题设计的值，它创建 BFC 但不改变溢出行为，语义清晰、无副作用。
- 兼容性足够：Chrome 64+、Firefox 58+、Edge 79+、Safari 12.1+，现代项目可放心用
- 不会裁剪任何内容，下拉菜单、阴影、负 margin 元素全部照常显示
- 比
overflow: hidden更易维护——样式意图明确，后续接手的人一眼看懂“这是为了包裹浮动” - 如果必须兼容 IE，再退回到
::after伪元素法，而不是硬加overflow: hidden
如果坚持用 overflow，必须检查的三件事
加之前先确认父容器是否真的需要裁剪；加之后务必验证这些点：
- 子元素有没有
box-shadow？它默认不受overflow: hidden影响，得换成filter: drop-shadow()才能被裁剪 - 是否有
background-image或渐变？确保设置了background-clip: padding-box，否则背景会铺满边框区域，盖住圆角视觉效果 - 父容器是否已有
overflow: visible且被其他规则覆盖？DevTools 的 Computed 面板里查overflow实际值，别只看 Styles 面板
最常被忽略的是：清除浮动不是目的，让父容器拥有正确渲染区域才是。用 flow-root 或 flex 布局，比反复调试 overflow 和 clear 组合要省心得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
