float是唯一原生支持文字环绕且全浏览器兼容的方案，但需满足三条件：图片在html流中、显式设宽、后续文字不被新bfc隔断；常见失效因bfc切断、缺width或现代容器干扰。
float 是当前唯一原生支持文字环绕图片、且所有浏览器稳定兼容的方案，不需要 Flex 或 Grid，但必须满足三个硬性条件：图片在 HTML 流中、显式设宽、后续文字不被新 BFC 隔断。
为什么 float:left 后文字没绕过去？
常见现象是图片“浮”上去了，文字却从下方整块顶上来，像没生效一样。根本原因不是 CSS 写错了，而是布局上下文被意外切断：
-
img后面跟着一个div（哪怕空的），且该div有overflow: hidden、display: flex或contain: layout—— 这些都会创建新 BFC，文字就“看不见”浮动了 -
img没设width，只写了max-width: 100%，浏览器无法确定浮动块初始宽度，导致文本流重排错乱 - 文字内容用的是
display: flex包裹的p，或父容器用了display: grid——float在这些现代容器里基本失效
怎么写才保证文字一定绕图？
结构比样式更关键。只要 HTML 顺序和容器约束对了，float 几乎不会失手：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
img必须直接放在文字内容之前，中间不能插任何块级元素（包括空div、br、hr） - 推荐写法：
<img src="a.jpg" style="max-width:90%"><p>这里是第一段环绕文字</p> - 如果要多段文字都绕，全部
p必须连续写在img后面，且它们共同的父容器不能触发新 BFC（比如避免overflow: hidden） - 想让某一段“退出环绕”，加
<p style="clear: both">这段从下一行开始</p>，注意它只影响自己，不影响前面已绕排的内容
响应式下绕排崩了怎么办？
小屏宽度不够时，float 强行绕排会让文字缩成窄列、行高失控、可读性归零。这时候别硬撑，用媒体查询主动退场：
- 在
@media (max-width: 600px)里把img的float改成float: none，再加display: block; margin: 0 auto;让它居中独占一行 - 别对浮动
img直接用max-width: 100%—— 它可能在加载中塌陷，导致文字先绕了个寂寞；改用固定宽 + 媒体查询分段控制 - 如果父容器本身是
flex或grid，干脆放弃float，改用align-self: start+margin模拟图文并排，不追求“绕”，只保逻辑清晰
真正容易被忽略的不是怎么写 float，而是浮动后父容器高度坍缩——背景色包不住图、边框断开、后续内容上移，这些问题全是因为没人处理 float 脱离文档流带来的副作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
