应优先使用 display: flow-root 创建BFC来解决浮动导致的圆角失效问题，而非 overflow: hidden；后者仅裁剪溢出但不修复渲染区域，且可能漏出尖角、影响阴影和动画，而 flow-root 语义清晰、兼容良好、不干扰布局。
直接加 overflow: hidden 能让圆角“看起来正常”，但大概率是治标不治本——它只是裁掉溢出部分，而不是修复父容器的渲染区域。真正的问题是浮动导致父容器高度塌陷，border-radius 画在了 0 高度的线上。
为什么 overflow: hidden 有时仍漏出尖角
即使加了 overflow: hidden，你仍可能看到浮动子元素的右上/右下角“顶破”圆角。这不是 bug，而是裁剪机制的局限：
-
overflow: hidden的裁剪边界基于容器的几何盒模型，而transform、position: absolute或box-shadow可能让子元素脱离该边界 -
box-shadow默认不受overflow: hidden影响，需改用filter: drop-shadow()才能被裁剪 - Safari 中若父容器没设
will-change: transform或transform: translateZ(0)，动画帧里可能出现短暂“破框” - 如果父容器本身是
display: inline-block或display: table-cell，overflow属性根本不会触发 BFC，加了也无效
display: flow-root 是更稳妥的替代方案
它专为解决这类问题设计：创建 BFC，但不裁剪、不滚动、不干扰定位。
- 兼容性足够：
Chrome 64+、Firefox 58+、Edge 79+、Safari 12.1+，现代项目可直接用 - 不会隐藏下拉菜单、Tooltip、
transform偏移的箭头或box-shadow - 语义清晰：后续维护者一眼看懂“这是为了包裹浮动”，而不是猜测“为什么这里要裁剪”
- 比
overflow: hidden更易测试——不用反复验证阴影是否被砍、弹层是否被截
如果必须用 overflow: hidden，这三件事要立刻检查
加之前先确认是否真需要裁剪；加之后务必验证：
立即学习“前端免费学习笔记（深入）”；
- 子元素有没有
box-shadow？换成filter: drop-shadow()，否则它照常溢出 - 背景是渐变或图片？确保设了
background-clip: padding-box，否则背景会铺满边框外缘，盖住圆角视觉效果 - 父容器的
overflow实际值是多少？DevTools 的 Computed 面板里查，别只看 Styles 面板——可能被其他规则覆盖成visible
最容易被忽略的是：清除浮动不是目的，让父容器拥有正确渲染区域才是。用 flow-root 或 flex/grid 布局，比反复调试 overflow 和 clear 组合要省心得多。
