float 不推荐用于图文环绕，因其易导致父容器塌陷、需清除浮动、响应式难控且与现代布局混用易出错；W3C 已将其列为遗留机制；现代首选是配合 float 使用的 shape-outside 属性，可精确控制文字绕行轮廓。
float 为什么现在不推荐用于图文环绕
现代布局中，float 已不是图文环绕的首选方案。它原本设计用于文字环绕浮动图片（比如报纸排版），但副作用太多：父容器高度塌陷、需要额外清除浮动、响应式下难控制、与 Flex/Grid 混用易出错。浏览器虽仍支持，但 W3C 已将 float 定义为“legacy layout mechanism”。
真正实用的图文环绕方案：CSS shape-outside
这是专为图文环绕设计的现代属性，配合 float 使用，但行为更可控、语义更清晰。关键点在于：必须和 float: left 或 float: right 同时出现，且只对块级元素生效。
-
shape-outside定义文字绕行的轮廓（如圆形、椭圆、多边形），默认是矩形框 - 必须设置
width和height（或显式尺寸），否则形状无效 - 常用值：
circle()、ellipse()、polygon()；inset()适合带内边距的裁剪 - 文字只绕该浮动元素，不影响后续其他块级元素布局
img {
float: left;
width: 150px;
height: 150px;
shape-outside: circle(50%);
margin-right: 1rem;
}
margin 在图文环绕中的真实作用
margin 不参与“绕行逻辑”，只控制浮动元素与其他内容的间距。常见误用是以为加大 margin 能让文字离得更远——其实它只是把浮动框整体推开，绕行路径仍是基于 shape-outside 或默认矩形边界。
-
margin-right（左浮动时）或margin-left（右浮动时）控制文字与图的横向间隙 -
margin-top/margin-bottom影响上下对齐，但不会改变绕行范围 - 若同时设了
shape-outside，margin会作用于形状外沿，不是原始盒模型
兼容性与降级处理要点
shape-outside 在 Chrome 37+、Firefox 62+、Safari 10.1+ 支持，IE 完全不支持。若需兼容旧环境，可双写：
立即学习“前端免费学习笔记（深入）”；
img {
float: left;
width: 150px;
height: 150px;
margin-right: 1rem;
/* 降级：无 shape-outside 时按矩形绕行 */
shape-outside: circle(50%);
}注意：不要用 @supports 包裹 float，因为 float 本身必须存在，shape-outside 才能生效。真正要检测的是 shape-outside 是否被支持，但即使不支持，只要保留 float + margin，图文环绕基础效果仍在。
复杂点在于多图并排环绕或文字跨列时，shape-outside 不会自动协调多个浮动元素的绕行区域——这时得靠 display: flow-root 隔离上下文，或直接切到 column-count + break-inside 方案。
