优先用 clear: both 将段落拉回正常流底部，再配合 margin-top 微调间距；浮动元素的 margin-bottom 对后续非浮动段落无效，因其已脱离文档流。
浮动元素导致后续段落紧贴上一行怎么办
浮动元素会脱离文档流，后面非浮动的 会“无视”它的物理高度，直接从左侧或右侧起始位置开始排列，造成视觉上段落间距消失或错位。这不是 margin 没生效，而是元素根本没在预期的垂直位置上。
常见现象：多个 中间突然少了一大块空白，或者最后一个段落卡在浮动图片右侧、底部不齐。
- 优先用
clear把段落“拉回正常流底部”，例如：正文
- 不要只依赖
margin-top，因为如果前一个元素是浮动的，margin-top可能完全不作用于它（塌陷或被忽略） - 若浮动容器有固定高度，可在其父级加
overflow: hidden或display: flow-root来闭合浮动，让后续段落自然换行
clear:both 和 clear:left/right 的选择依据
clear 的值决定段落要避开哪一侧的浮动元素。多数情况下你并不知道浮动来自左还是右，所以默认用 clear: both 最稳妥。
-
clear: left：仅当上方有左浮动元素且你确定右侧无干扰时可用，否则段落可能仍被右浮动内容顶住 -
clear: right：同理，适用场景极窄，比如专门处理右栏广告后的正文恢复 -
clear: both：强制段落下移至所有浮动元素底部，是修复段落错位最直接有效的写法
为什么给浮动元素加 margin-bottom 不起作用
浮动元素的 margin-bottom 不会影响后续非浮动块级元素的垂直位置——因为后者根本不把它当“上面有个东西”来看待。它的 margin 只在浮动上下文内部起作用（比如影响同级浮动兄弟元素间距）。
立即学习“前端免费学习笔记（深入）”；
- 想控制浮动图和下一段文字的距离，必须在 下一段文字 上设置
margin-top，而不是在图片上设margin-bottom - 如果该段落也浮动了，那它和前一个浮动元素之间又变成“同级浮动”关系，此时
margin才真正生效 - 更可靠的做法是：统一用
clear拉回标准流，再配合margin-top微调间距
现代替代方案：float 已过时，但 legacy 项目还得修
新项目应改用 display: flex 或 display: grid 布局，它们天然规避浮动带来的流问题。但在维护老系统时，clear 仍是最快见效的补救手段。
注意：如果用了 display: flow-root（如给浮动容器父级设置），IE 完全不支持；而 overflow: hidden 虽兼容好，但可能意外裁剪阴影或溢出内容——这些细节比“怎么清浮动”本身更容易引发新 bug。
