float: left 在现代布局中不触发文字环绕，是因为父容器使用 display: flex/grid、contain: layout 或 overflow: hidden 等会创建新 BFC 的样式，隔离了浮动影响；shape-outside 需同时满足 float、display: block 且不在隔离上下文中才生效。
float: left 在现代 HTML5 布局中为何不触发文字环绕
因为 float 本身没失效，但它的作用被现代布局方式“隔离”了。常见原因是父容器用了 display: flex、display: grid 或设置了 contain: layout，这些会创建新的 BFC（块级格式化上下文），导致 float 失去对兄弟元素的排版影响能力。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查图片父容器是否用了
display: flex或display: grid—— 这两类布局下float完全无效，文字不会绕排 - 若需保留
float效果，把图片移出 flex/grid 容器，或改用display: block+float: left的传统流式结构 - 确认图片没有被包裹在
figure或div中且该容器设置了overflow: hidden或display: flow-root—— 这些也会剪裁浮动影响范围
shape-outside 需要哪些前提条件才能生效
shape-outside 不是加了就绕，它有三个硬性依赖：必须配合 float 使用、元素必须是块级、且不能处于隔离的格式化上下文中。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只对设置了
float: left或float: right的<img>生效，单独写shape-outside: circle()没反应 - 确保图片是块级元素：
display: block（<img>默认 inline，必须显式设置） - 避免父容器使用
display: flex、display: grid、contain: layout、overflow: hidden等会阻断浮动传播的样式 - 简单测试可用：
img { float: left; display: block; width: 150px; shape-outside: ellipse(75px 50px at 75px 50px); margin-right: 1em; }
HTML5 语义化标签（如 <figure>）是否干扰文字环绕
不是语义标签本身的问题，而是开发者常给 <figure> 加的默认样式或重置规则导致的。比如某些 CSS 重置库会设 figure { display: table } 或 overflow: hidden，这会切断 float 的外溢效果。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查浏览器 DevTools 中
<figure>的 computeddisplay和overflow值 - 若
<figure>是浮动图片的直接父容器，它必须是display: block且无overflow剪裁 - 更稳妥的做法：把
float和shape-outside直接加在<img>上，<figure>仅作语义包裹，不参与排版
替代方案：不用 float 怎么实现图文环绕
CSS inline 图片天然支持文字环绕，但控制力弱；真正可替代 float 的现代方案是 display: flow-root + float 组合，或直接用 column-count 分栏（适合长文+插图场景）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 最简兼容方案：用
<img align="left">（HTML5 已废弃但浏览器仍支持，适合快速原型） - 现代可控方案：用
float+shape-outside，但务必确保父容器是普通文档流（display: block），并显式设置img { display: block } - 分栏方案（适合杂志式排版）：
.article { column-count: 2; column-gap: 1.5em; } .article img { width: 100%; break-inside: avoid; }注意：图片需放在段落内，且不能设float
float 和 shape-outside 彻底静音。调试时优先看父级 display 和 overflow，而不是反复调 shape-outside 的参数。 
