float 是唯一原生支持文字环绕图片且全浏览器兼容的方案，但需将 float 写在 <img> 上且图片 HTML 必须位于文字之前；文字环绕原理是浮动后文字按行内流自动填充其右侧和下方空白区域，而非图片位置决定绕排方向。
float 是唯一原生支持文字环绕图片、且全浏览器兼容的方案，但必须写在 <img> 上，且图片 HTML 必须出现在文字之前——否则文字根本不会绕。
为什么 float: left 反而让文字在图片右边
文字环绕不是靠“把图放右边”，而是靠让图左浮后，文字按行内流自动填充它右侧和下方的空白区域。浏览器把浮动后的 <img> 当作一个不可穿透的障碍物，段落文字会顺着它的右边界和底边界流动。
-
float: right会让文字绕到图片左边，但实际使用中容易和 RTL 文本或某些 CMS 的默认结构冲突，float: left更稳定 - 如果文字没绕、图片下沉、后续段落卡住不动，大概率是文字没处在同一 BFC 中，而不是 float 写错了
-
vertical-align对<img>无效——它只对行内元素基线起作用，浮动后已脱离行内流
<img> 必须显式设 width，不能只靠 max-width: 100%
加载时图片占位塌陷，max-width: 100% 没有基准宽度，会导致文字先绕错位置，图一出来就重排闪动。这不是 bug，是 float 布局依赖明确尺寸触发文本重排的必然行为。
- 推荐写法：
width: 200px; height: auto;或width: 30vw; height: auto;（配合父容器有明确宽度上下文） - 若需响应式，用媒体查询分段控制
width，而不是在浮动元素上直接套max-width: 100% -
aspect-ratio可替代height，但 Safari 15.4 以下不支持，老项目慎用
父容器别用 display: flex 或 overflow: hidden
这些属性会创建新 BFC，把浮动“截断”，文字绕不进去——不是样式失效，是布局上下文被切断了。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 常见崩坏：图片浮上去了，文字却从下方整块顶上来，像没生效一样
- 修复方式：换用
overflow: auto（注意可能影响高度），或干脆不用浮动，改用display: flow-root闭合父容器（IE 不支持） - 如果父容器已是
display: grid或display: flex，float基本失效，此时应放弃环绕，改用align-self: start+margin模拟图文并排
清除浮动不是为了“关掉浮动”，而是让下一段文字换行
clear: both 作用对象是它自己所在的元素，不是前面的图片。它只说：“我不能出现在任何浮动元素旁边”，所以会强制下移一行。
- 想让下一段文字不绕图？给那段
<p style="clear: both">加样式，而不是给图片加 - 别在环绕段落内部加
clear，否则整段都会掉下来；首行缩进要用::first-line - 父容器高度坍缩（背景色包不住图）是浮动脱离文档流的必然结果，得用伪元素
::after { content: ""; display: table; clear: both; }闭合
真正容易被忽略的，不是怎么写 float，而是浮动后父容器高度坍缩带来的连锁反应：背景色断开、边框消失、后续内容上移——这些问题全是因为没人处理 float 脱离文档流的副作用。
