float环绕失效主因是父容器未触发bfc致塌陷；文字间距由图片margin控制而非padding；text-indent与float存在行框与内容框冲突；响应式下应弃float改用现代布局方案。
float环绕失效时先检查父容器是否触发BFC
文字不绕图，不是float写错了，大概率是父容器把浮动“吃掉”了。常见于div没设高度、又没触发BFC（块级格式化上下文），导致浮动元素脱离文档流后，父容器塌陷，后续文字直接从顶部开始排布。
实操建议：
- 给父容器加
overflow: hidden或overflow: auto（最稳妥） - 用
display: flow-root（现代方案，语义清晰，但IE不支持） - 避免只靠
height硬撑，容易在内容动态变化时出问题
文字紧贴图片边缘却留白过大？重点调margin而非padding
padding是图自身的内边距，影响的是图片内容区域；而文字环绕的间距由图片的margin决定——尤其是margin-right（右图）或margin-left（左图）。
常见错误现象：加了padding发现文字没动，以为CSS没生效。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 右浮动图片，用
margin-left: 16px控制文字与图的水平距离 - 左浮动图片，用
margin-right: 16px（别反了） - 垂直方向若需额外间隙，优先用
margin-top/margin-bottom，慎用line-height去“凑”
多段落环绕下首行缩进错乱？text-indent和float有隐式冲突
设置了text-indent: 2em后，第一行缩进可能被浮动图片“顶开”，尤其当图片高度小于首行高度时，缩进位置会偏移到图片下方再开始。
这不是bug，而是float元素仅影响**行框盒子（line box）** 的可用宽度，而text-indent作用于整段的**内容框（content box）** 起点。
实操建议：
- 改用
padding-left模拟缩进（更可控，且不受浮动干扰） - 若必须用
text-indent，可对首段单独加clear: both再重置margin-left - 避免在浮动元素紧邻的段落上同时使用
text-indent和margin混合控制缩进
响应式场景中float环绕突然崩溃？别硬撑，该换就换
在小屏设备上，图片宽度压缩后仍强制float: left，文字会被挤成极窄列，阅读体验极差；媒体查询里反复覆盖float和margin也容易漏配。
性能与兼容性影响：float本身无性能问题，但维护成本高；现代浏览器都支持shape-outside，但移动端Safari对复杂路径支持不稳定。
实操建议：
- 屏幕宽度 float，改用
display: block+margin: 0 auto居中图片，文字自然上下排列 - 如需高级环绕（如圆形、多边形），优先试
shape-outside: circle()，但务必加float作为前提（它不替代浮动） - 别为了“保持环绕”在手机端强行维持
float，用户根本不需要那点侧边空隙
真正难的不是写对float和margin，而是判断什么时候该放弃它们——尤其当设计稿没区分断点行为时，开发者得自己决定文字在哪断、图在哪收、缩进在哪起效。
