现代图文混排不应首选float，它专为印刷设计、易引发BFC、塌陷等问题；仅适用于IE8兼容或首字下沉场景；shape-outside才是实现不规则环绕的正确方案。
float 会让文字环绕图片，但现代布局中它早就不该是首选
用 float 实现图文混排，确实能绕开一些“文字不贴图”的问题，但它本质是为印刷排版设计的，不是为响应式网页准备的。现在强行用，反而容易触发 BFC、清除浮动、父容器塌陷这些老问题。
常见错误现象：float: left 后，图片下方的文字没环绕、父容器高度变成 0、右侧内容被挤到下一行还错位。
- 必须给浮动元素加
clear或触发 BFC（比如overflow: hidden）才能防止父容器塌陷 -
float不脱离文档流的程度很“暧昧”——它仍影响行内盒布局，但又不占块级空间，调试时经常误判高度来源 - 在 Flex 或 Grid 容器里对子元素设
float，行为不可靠，部分浏览器会直接忽略
真正该用 float 的场景只剩两个
一是兼容 IE8 及更老浏览器的遗留项目；二是需要实现「首字下沉 + 文字环绕」这种特殊印刷效果（配合 ::first-letter）。除此之外，别硬套。
使用场景举例：某政务网站要求支持 IE8，且首页新闻列表需图片左置、标题+摘要文字右绕 —— 这时才值得写：
立即学习“前端免费学习笔记（深入）”；
img { float: left; margin-right: 12px; }
.news-item { overflow: hidden; } /* 清除浮动，防塌陷 */注意：overflow: hidden 是最轻量的 BFC 触发方式，比 clear: both 更稳妥，因为后者依赖额外空标签或伪元素。
shape-outside 才是现代环绕的正确打开方式
如果真要让文字紧贴不规则图片边缘（比如圆形头像、带透明背景的 PNG），float 完全做不到，必须上 shape-outside。
- 只对设置了
float的元素生效 —— 没错，它和float是绑定关系，但作用完全不同 - 值可以是
circle()、ellipse()、polygon()，也可以是图片的 alpha 通道（url(avatar.png)） - 性能敏感：用图片生成形状时，浏览器需解析像素，首次渲染略慢；建议用 CSS 几何函数替代
示例（文字绕圆形头像）：
img { float: left; shape-outside: circle(50%); width: 100px; height: 100px; }移动端和响应式下，float 的坑比你想象的深
当图片宽度随屏幕缩放，float 不会自动调整文字环绕范围，容易出现文字重叠、断行错乱。尤其在 Safari iOS 上，shape-outside 对 vw 单位的支持不稳定。
- 不要用
float做响应式栅格 —— Flex/Grid 更可控，媒体查询也更干净 - 如果非要用，确保图片宽高固定或用
aspect-ratio锁定比例，否则shape-outside的几何函数会失准 - 测试时重点看小屏横屏状态：iOS Safari 对
float + shape-outside的换行逻辑和 Chrome 不一致
复杂点在于：环绕效果不是纯视觉问题，它直接影响可访问性（屏幕阅读器读取顺序）和 SEO（DOM 顺序与视觉顺序分离）。一旦用了 float，就得同步检查 tabindex 和 aria-flowto 是否匹配视觉流。
