浮动图片与段落文本对齐问题根源在于margin位置错误和clear缺失：img需设margin-right（左浮）或margin-left（右浮）来推开文字，p加margin无效；后续段落须用clear: both强制下移；父容器推荐display: flow-root闭合浮动。
浮动图片和段落文本“看起来没对齐”“文字贴边难读”“下一段突然卡在图片右边”，根本不是图片没设好，而是 margin 用错位置、clear 没加对地方。
浮动图片的 margin 必须加在 img 上，而不是 p 上
很多人给段落加 margin-left 想推开图片，结果毫无反应——因为浮动的 img 已经脱离文档流，p 的 margin 只作用于它自己的盒模型边界，而图片物理上就处在 p 内部（加个 border: 1px solid red 就能看到）。真正能推开文字的，只有图片自身的外边距。
- 左浮动图片：必须设
margin-right（比如16px），否则文字紧贴右侧 - 右浮动图片：必须设
margin-left（比如16px），否则文字紧贴左侧 -
margin-bottom对后续非浮动段落无效，别指望靠它留出段间距
后续段落不换行、卡在图片侧边？立刻加 clear: both
浮动元素脱离文档流后，下一个 p 会直接从图片底部起始位置继续排布，视觉上就是“被顶住”。这不是段落没高，是它压根没意识到上面飘着个东西。
- 最稳妥写法：
正文
- 避免只用
clear: left或clear: right，除非你 100% 确认浮动方向且无交叉干扰 - 不要只调
margin-top，如果前一个元素是浮动的，这个 margin 很可能塌陷或被忽略
父容器高度塌陷导致背景/边框消失？优先用 display: flow-root
当图片浮动后，其父 div 高度变成 0，背景色、border 全部失效。这是浮动最典型的副作用。
- 推荐方案：
div { display: flow-root; }—— 安全闭合浮动，不影响溢出内容（如阴影、下拉菜单） - 兼容性妥协：
div { overflow: hidden; }—— IE 全版本支持，但可能意外裁剪box-shadow或position: absolute子元素 - 避免用
overflow: auto，滚动条可能无故出现；也别依赖空，语义差且多一层 DOM
现代项目里还该用 float 吗？看场景，别硬扛
float 本身没被淘汰，但它只适合“图文环绕”这一类明确语义的场景。一旦涉及多栏、响应式、对齐控制，它就会迅速暴露局限性。
- 简单图文混排（如博客正文插图）：
float + margin + clear依然高效、兼容好 - 需要等高列、居中、自适应断行：直接上
display: flex或display: grid，别绕弯 - 维护老系统时，重点不是“要不要换”，而是“哪块先修”——优先修复 clear 和 margin 错位这类高频视觉 bug
真正容易被忽略的是：浮动的影响不只在当前元素，它会持续作用到后续所有未清除的块级元素；而 clear 不是“清掉图片”，是告诉浏览器“从此处开始，别再让文字绕着它跑了”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
