float: left 必须写在<img>元素上以触发文字环绕，因其依赖行内流对浮动元素的自动折行响应；<img>默认为inline，设display: block会使其脱离行内流，导致文字无法环绕。
float: left 为什么必须写在图片上，且不能加 display: block
因为文字环绕依赖的是行内流对浮动块的自动折行响应，而 display: block 会切断 <img> 的行内替换元素特性——它默认是 inline，加了 display: block 就不再参与行内流布局，文字直接“看不见”它，自然不绕。
-
<img>标签保持默认display: inline或显式设为display: inline-block（注意：后者需谨慎，可能影响换行行为） - 浮动必须直接作用于
<img>元素本身：float: left或float: right - 别给图片父容器设
display: inline-block，否则整个容器变成“一块”，文字不再绕图 - 图片必须有明确宽度（
width或max-width: 100%+height: auto），否则浏览器无法确定浮动区域大小，导致换行异常
图文不环绕、文字全掉到图片下面，大概率是 HTML 结构或 BFC 没配对
这不是 CSS 写错了，而是浮动生效的前提被破坏了：浏览器只对浮动元素**之后**的行内内容做环绕；如果结构或上下文不对，文字根本没机会响应。
-
<img>必须写在文字容器（如<p>或同级<div>）的前面，不能后置 - 图片和文字必须共用同一个父容器，不能分属不同
<div> - 父容器必须触发 BFC，否则高度塌陷，后续段落从顶部重排：
overflow: hidden最兼容；display: flow-root更语义化（Chrome 64+/Firefox 58+ 支持）；伪元素清除需完整：::after { content: ""; display: table; clear: both; } - 千万别把
clear: both直接加在文字容器（如<p>）上，它会强制整段换行，彻底打断环绕
margin 加在哪、加多少才有效：只调图片自身，别碰文字容器
文字是行内流，只响应浮动元素自身的外边距，不响应父容器或文字块的 margin。加错位置等于白调。
- 左浮动图片：加
margin-right: 12px控制右侧文字距离（别写反） - 右浮动图片：加
margin-left: 12px - 多段落场景下，必须加
margin-bottom: 12px，否则下一段文字会顶到图片底部，留出大片空白 - 避免用
margin: 10px这种简写——上下值会意外“顶开”相邻段落 - 别给文字容器设
width或display: inline-block，这会切断行内流，让环绕中断
响应式下 float 崩坏，不是 bug，是 float 本身不感知尺寸变化
固定像素的 margin 和未重写的 shape-outside 在小屏上必然失准；这不是兼容性问题，而是 float 的固有局限。
立即学习“前端免费学习笔记（深入）”；
- 在
@media (max-width: 768px)中直接移除浮动：float: none、shape-outside: none，改用display: block; margin: 0 auto;让图片居中独占一行 - 若坚持用
shape-outside，所有形状参数必须用百分比（如circle(50% at 50% 50%)）或vmin，且每个断点都得重写整个声明 - 旧版 iOS Safari（15.x 及更早）和微信 WebView 不支持
shape-outside，检测不到就降级，别硬撑 - 真正麻烦的不是写
float: left，而是浮动生命周期管理：HTML 顺序是否可控、BFC 是否稳、响应式断点是否覆盖全、屏幕阅读器能否按语义顺序读取——这些都得靠结构验证，不能只盯视觉对齐
