浮动导致父容器高度塌陷，border-radius看似失效实为渲染区域缺失；清除浮动推荐::after伪元素（content:"";display:table;clear:both）；现代布局应优先使用flex/grid替代浮动。
浮动元素导致父容器 border-radius 失效
当子元素设置了 float，父容器高度塌陷，border-radius 会“画”在一条看不见的、高度为 0 的线上——看起来就像圆角没生效，或者边框被截断。这不是圆角失效，而是父容器根本没包裹内容，渲染区域不存在。
常见现象：父容器设了 border-radius: 8px 和 overflow: hidden，但右上/右下角依然露出了浮动子元素的尖角；或者整个边框干脆不显示。
- 根本原因不是
border-radius不支持浮动，而是父容器没有形成 BFC 且高度为 0 -
overflow: hidden虽能触发 BFC 并撑开高度，但它会裁剪超出的内容，可能意外隐藏子元素的阴影、下拉菜单等 - 用
clear: both在末尾加空 div 是最直白的方式，但污染语义结构，也不利于维护
用 ::after 伪元素清除浮动（推荐）
这是目前最干净、无副作用的清除方式，兼容到 IE8+，且不新增 DOM 节点。
核心是给父容器添加一个可触发 BFC 的伪元素，并清除两侧浮动：
.container::after {
content: "";
display: table;
clear: both;
}
注意点：
-
display: table触发 BFC 且不产生额外行高，比block更稳妥；display: block+clear: both在某些老浏览器中可能仍不撑高 - 不要漏写
content: ""，否则伪元素不会渲染，清除无效 - 如果父容器本身有
zoom: 1（IE hack），可以保留，但现代项目基本不需要
border-radius + overflow:hidden 组合为何有时仍溢出
即使清除了浮动、父容器有了正确高度，border-radius 和 overflow: hidden 一起用，仍可能看到子元素边缘“顶破”圆角——尤其是子元素用了 transform、position: absolute 或带 box-shadow。
这是因为 overflow: hidden 的裁剪边界，是在「渲染层合成前」计算的，而某些属性（如 transform）会让元素脱离普通文档流并提升为独立图层，裁剪失效。
- 解决办法之一：给父容器加
transform: translateZ(0)或will-change: transform，强制其建立新的包含块（containing block），让overflow裁剪真正生效 - 若子元素是绝对定位，确保它的
top/right值没让它物理越界到圆角区域外 -
box-shadow默认不受overflow: hidden影响，需用filter: drop-shadow()替代才能被裁剪
Flex/Grid 布局下根本不用清浮动
如果你的“浮动”只是为了解决多列布局或对齐问题，现在应该直接换用 display: flex 或 display: grid ——它们天然不塌陷，border-radius 会完整作用于容器本身。
例如：
.container {
display: flex;
border-radius: 8px;
overflow: hidden; /* 此时才真正安全 */
}
注意：
- Flex 容器默认
flex-wrap: nowrap，单行溢出时仍需overflow控制，但高度不会塌陷 - Grid 同理，且支持更精细的轨道控制，比浮动 + 清除灵活得多
- 如果必须兼容 IE10/11，Flex 比 Grid 更稳妥；但 IE 已退出主流支持，优先选语义清晰的现代方案
真正难处理的，往往不是“怎么清浮动”，而是忘了浮动本身已是过时布局手段——该换就换，别在旧范式里打补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
