float布局图文环绕失效主因有三：浮动元素后无连续文本流、父容器overflow隐藏触发BFC阻断环绕、图片未设width导致行为失控；应确保图片直置段落开头、设明确width、避免overflow:hidden，改用flow-root或flex替代。
float 布局图片后文字环绕失效的常见原因
文字没绕到图片右侧，反而换行或堆叠在下方，大概率是以下几点之一：float 元素后面没有紧跟文本流内容、父容器设置了 overflow: hidden 或 auto 且未触发 BFC 清除浮动、图片本身是 inline 元素但被设了 display: block 后又没给宽高。
- 确保图片标签直接放在段落开头，且后续
p或span内容不包裹在新块级元素里（比如别套一层div） - 图片必须设置明确的
width，否则float行为不可控；height可设可不设，但建议用aspect-ratio或object-fit控制缩放 - 父容器若加了
overflow: hidden，会裁剪浮动溢出，同时隐式创建 BFC，导致文字无法环绕——此时要么去掉该属性，要么改用display: flow-root
用 margin 微调图文间距时的关键数值逻辑
margin 不是凭感觉填数字，得看浮动方向和文字流向。比如左浮动图片，文字从右侧开始流，真正影响图文间隙的是图片的 margin-right 和文字容器的 margin-left，但后者通常不起作用，因为文字是内联流，只响应图片的外边距。
- 左浮动图片：优先调
margin-right控制图与文距离；margin-bottom影响下一段文字的起始位置 - 右浮动图片：优先调
margin-left；若文字过短导致换行错位，可给文字容器加max-width限制宽度 - 避免对图片设
margin-top或margin-bottom过大，容易撑开父容器高度，造成下方内容偏移
float + margin 在响应式场景下的典型崩坏点
一屏适配好，换设备就错位，往往不是媒体查询没写，而是 float 本身不响应宽度变化，而 margin 值又写死了像素。
- 别用固定
px值写margin，改用em或rem（如margin-right: 1.2rem），让间距随字号缩放 - 图片宽度建议用百分比（如
width: 30%）配合max-width限制上限，避免小屏上图片撑爆容器 - 当屏幕窄到图片宽度
≤ 50%时，文字可能只剩一两词宽，自动换行导致“悬停式”错位——此时应在断点处取消float，改用display: flex垂直堆叠
现代替代方案为什么值得考虑
float 本就不是为图文混排设计的，它只是借用了“脱离文档流+文字绕排”的副作用。现在 shape-outside 能实现文字绕任意形状，display: flow-root 可安全清除浮动，而 flex 或 grid 更适合控制整体结构。
立即学习“前端免费学习笔记（深入）”；
- 若只需简单左图右文，
display: flex+align-items: flex-start更稳，且不用操心清除浮动 - 若要文字紧贴图片边缘（比如圆角图、SVG 轮廓），必须用
shape-outside配合clip-path，float完全做不到 - 所有使用
float的旧项目，只要没强依赖 IE8–9，都建议逐步迁移到flow-root或flex，否则每次调margin都像在修一台老收音机
真正难的不是算清 margin 值，而是判断什么时候该放弃 float。
