float是唯一全浏览器稳定支持的文字环绕方案，但必须将float加在<img>上且图片位于文字前；需设width和margin避免错乱；Flex/Grid父容器会使float失效；须用clear: both清除浮动影响。
float 是目前唯一原生支持、全浏览器稳定可用的文字环绕方案，但必须严格满足几个前提条件，否则文字根本不会绕。
float 必须加在 <img> 上，且图片得在文字前面
浮动生效依赖 HTML 顺序和元素类型：<img> 默认是内联级替换元素，天然参与文本流；如果把它放在段落文字之后，或者套进 <div style="display: block"> 里，文字就“看不见”它了。
-
<img src="a.jpg" style="float: left; width: 180px; margin-right: 12px;">—— 正确：图片标签写在<p>前面 - 不能写成：
<p><img ...> 这段文字...</p>—— 图片被包在块级<p>里，失去行内上下文 - 也不能给
<img>加display: block或margin: auto—— 这会切断它与文字的流式连接
width 和 margin 缺一不可，否则绕排错乱或紧贴难读
没有显式 width 的浮动图片，在响应式容器中宽度不可控，文字可能被挤到下一行只剩一个字；没设 margin 则文字直接顶到图片边缘，视觉上像粘连。
-
width推荐用固定值（如180px）或相对单位（如12em），避免仅用max-width: 100% -
margin-right（左浮动时）或margin-left（右浮动时）至少设12px起，margin-top/bottom对环绕影响小，可不设 - 若首行文字位置偏高，可加
vertical-align: top调整基线对齐
父容器用了 Flex/Grid，float 就直接失效
现代布局容器会重置子项的浮动行为。display: flex 或 display: grid 的父元素里，float: left 可能被忽略、降级为 inline 行为，甚至让图片“消失”在文字流里。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 检查父级是否写了
display: flex、display: grid或overflow: hidden—— 后者虽常用来清除浮动，但也会创建新 BFC，把浮动截断 - 若必须嵌套，要么整个图文区块单独抽离为非 Flex/Grid 容器，要么放弃环绕，改用
align-self: start+margin模拟位置 - 别指望
shape-outside救场：它只修饰已浮动的元素，没float基础，shape-outside完全不生效
后续内容错位？不是忘了 clear，而是清错了地方
浮动会让后续块级元素（比如下一个 <h3> 或 <div>）卡在图片下方，而不是从新行顶部开始。这不是 bug，是 float 的设计逻辑 —— 但它需要你主动干预。
- 最稳妥的是在浮动区域末尾加伪元素清除：
.wrapper::after { content: ""; display: table; clear: both; } - 避免用
<div style="clear: both"></div>—— 多余 DOM 节点，维护成本高 - 千万别只写
clear: left：它只防左边浮动，右边照样塌陷；必须用clear: both - 响应式小屏建议关掉浮动：
@media (max-width: 768px) { img { float: none; display: block; margin: 0 auto; } }
真正容易被忽略的，是浮动只对“参与文本流”的图片有效 —— 一旦它被 position: absolute、display: block、或 Flex/Grid 父容器隔离，环绕能力就彻底断了，这时候再调 margin 或 shape-outside 都没用。
