加了float:left文字仍贴图片边缘，是因为float本身不产生间距，必须给图片加margin-right（左浮动时）或margin-left（右浮动时）来控制文字与图片的水平距离，且需避免margin简写干扰行高。
文字紧贴图片、留白失控，不是 float 写错了，而是 margin 没加对位置或没加全。
为什么加了 float: left 文字还是贴着图片边缘？
因为 float 本身不产生间距——它只让文字“绕开”元素的边界，而这个边界默认就是图片的 margin edge。如果图片没设 margin-right（左浮动时）或 margin-left（右浮动时），文字就会直接顶到图片边框上。
- 必须把 margin 加在
img元素上，不是加在p或父容器上 - 方向要匹配浮动方向：左浮动 →
margin-right；右浮动 →margin-left - 避免用
margin: 12px这类简写，上下 margin 可能干扰行高或段落间距 - 推荐值：水平间距用
margin-right: 16px（或0.8em），垂直间隙补margin-bottom: 8px防下一段文字顶上来
图文混排中多段落错位、第二段突然换行怎么办？
这不是文字“不环绕”，而是浮动区域高度撑不开父容器，导致后续段落从浮动元素底部开始排布，而非继续沿右侧流动。典型表现是第二段开头空一大块，或者整段下沉。
- 给图片父容器加
overflow: auto或display: flow-root，强制触发 BFC，包裹住浮动 - 别依赖
height硬撑父容器，内容动态变化时会失效 - 若需精确控制最后一段结束位置，可在末尾加
<div style="clear: both"></div> - 慎用
clear: both直接加在p上——它会让整段换行，破坏环绕
响应式下浮动间距崩坏、小屏文字挤成窄列怎么修？
媒体查询里只改宽度却不重置浮动相关样式，是常见翻车点。尤其当 margin-right: 16px 在 320px 屏幕上变成“右边空出 16px 却无处可绕”时，文字只能强行折行。
- 在
@media (max-width: 768px)中统一移除浮动逻辑：float: none、clear: none、margin-left/right: 0 - 让图片回归文档流，居中显示，文字自然上下排列
- 如需保留环绕，改用
shape-outside+clip-path，但注意 Safari 对shape-outside的兼容性仍有限 - 测试时重点看图片高度是否远超行高——小屏下
line-height和font-size变化容易放大错位
真正难调的从来不是 float 或 margin 这两个声明，而是浮动生命周期里的边界条件：图片是否被后续块级元素“顶下来”、屏幕阅读器能否按视觉顺序读取、缩放 200% 后 margin 是否还合理。这些没法靠一条规则覆盖，得靠结构语义 + 多尺寸真机验证来兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
