border-radius 对浮动图片完全生效，但需注意父容器 overflow 设置、图片显式宽高及 object-fit 行为，否则易因裁剪或渲染时机导致圆角“失效”。
border-radius 对浮动图片生效吗
完全生效，但要注意浮动元素的盒模型边界和裁剪关系。很多情况下图片圆角“没效果”，其实是 overflow 隐式行为或父容器未设宽高导致的视觉错觉。
- 浮动本身不影响
border-radius计算，它只改变文档流位置 - 真正影响圆角显示的是：父容器是否设置了
overflow: hidden（常见于卡片封装） - 如果图片是
<img alt="CSS如何实现带圆角的浮动图片展示_通过border-radius裁剪浮动css元素" >标签且无显式宽高，border-radius仍会计算，但可能因渲染时机或缩放被截断 - 推荐始终给浮动图片加明确的
width和height，避免依赖内容撑开
float + border-radius 的典型写法
最简可靠组合就是直接在 <img alt="CSS如何实现带圆角的浮动图片展示_通过border-radius裁剪浮动css元素" > 上设置浮动和圆角，无需额外 wrapper：
img {
float: left;
border-radius: 12px;
width: 80px;
height: 80px;
object-fit: cover;
}
-
object-fit: cover能防止图片拉伸变形，尤其当宽高比不匹配时 - 不要用
border-radius: 50%除非你确认宽高等比——否则会变椭圆 - 若需右浮动且文字环绕，注意清除后续元素的浮动（
clear: both），否则圆角区域可能被文字穿透
为什么文字会盖住圆角边缘
这是浮动图文混排中最常被忽略的层叠问题：浮动元素默认 z-index: auto，而普通文本流内容在视觉上“覆盖”了圆角透明区。
- 解决方法不是加
z-index（对非定位元素无效），而是确保父容器有明确的overflow: hidden或使用isolation: isolate - 更稳妥的做法是把图片和文字包进同一个
<div>，对该容器设 <code>border-radius和overflow: hidden，再让图片浮动 - 切忌在浮动图片上单独设
background-color来“遮丑”，这会掩盖真实布局问题 - 如需兼容 Android 4.4，可改用
clip-path: circle()替代（但需注意clip-path对性能略敏感） - 移动端慎用大尺寸
border-radius（如24px）配小图，容易造成圆角比例失衡 - 不要依赖
float做响应式布局——flex 或 grid 更可控；浮动仅建议用于经典图文环绕场景
兼容性与移动端注意事项
border-radius 在所有现代浏览器包括 iOS Safari 10+、Android Chrome 都支持，但旧版 Android WebView（4.4 及更早）对 overflow: hidden + 浮动 + 圆角组合有渲染 bug。
立即学习“前端免费学习笔记（深入）”；
border-radius 就万事大吉，却忘了检查父容器的 overflow 和图片自身的 object-fit 行为。这两个点一漏，圆角就“消失”得莫名其妙。
