浮动导致父容器高度塌陷，使后续元素上移造成视觉错位；根本原因是父容器无法感知浮动子元素，应通过触发BFC（如overflow:hidden或display:flow-root）解决。
浮动元素本身会脱离文档流，导致其父容器无法正确包裹它，进而可能引发相邻块级元素的外边距（margin）发生意外重叠（即“外边距塌陷”）。但需注意：外边距塌陷通常发生在普通流中的块级兄弟/父子元素之间，而浮动元素自身的 margin 不会与普通流中其他元素发生塌陷。你提到的现象，更准确地说是：因浮动造成父容器高度塌陷，使得后续非浮动元素“上移”，视觉上看起来像 margin 重叠了。
根本原因：浮动让父容器“看不见”子元素
当子元素全部浮动后，父容器高度变为 0（除非有其他非浮动内容），后续兄弟元素就会紧贴着父容器的上边缘（即原本父容器该占的位置），如果这个兄弟元素设置了 margin-top，就容易和前面浮动内容的底部“撞在一起”，形成视觉上的错位或挤压感。
推荐解法：给父容器触发 BFC（最干净）
不依赖额外标签或清除符，直接让父容器形成块级格式化上下文（BFC），就能自动包含内部浮动元素：
- 给父容器设置 overflow: hidden（或 auto、scroll）
- 或使用 display: flow-root（现代标准，语义清晰，推荐）
- 也可用 float: left/right 或 position: absolute/fixed，但会改变布局角色，慎用
兼容性方案：用 clear 清除浮动影响
如果必须支持老浏览器，或需要精确控制清除位置：
立即学习“前端免费学习笔记（深入）”；
- 在浮动元素之后、下一个普通流元素之前，加一个空标签并设 clear: both
- 或给下一个元素自身设置 clear: both（前提是它也是块级且允许清除）
- 注意：clear 只对块级元素生效，行内元素加了也没用
避免“伪塌陷”的实用建议
不是所有看起来像塌陷的问题都真由 margin 引起：
- 检查是否误将 margin-top 加在了紧跟浮动块之后的元素上——试着改成 padding-top 或给父容器加 border
- 确认是否真的需要浮动；现代布局优先考虑 flex 或 grid，天然规避此类问题
- 若只是单侧排列，用 float + width 仍可工作，但务必包裹并触发 BFC
基本上就这些。关键不在“阻止 margin 塌陷”，而在“让父容器正常撑开”，BFC 是最直接有效的思路。
