浮动元素的margin不叠加而并存，同向浮动元素间距取较大值；反向浮动易致换行混乱；父容器塌陷需bfc或清除浮动解决；推荐用flex/grid替代浮动。
浮动元素的外边距（margin）不会像普通流内元素那样简单叠加，而是容易出现“塌陷”或“意外合并”，尤其在多个浮动元素并排时。关键在于理解浮动脱离文档流后，margin 的作用对象发生了变化——它不再与父容器或相邻非浮动元素直接发生折叠，但同级浮动元素之间仍可能因布局方式产生视觉间距异常。
浮动元素之间的 margin 不叠加，但会并存
两个左浮动（float: left）的块级元素，若各自设置 margin-right: 20px，它们之间的实际间距是 20px，不是 40px。因为 margin 在浮动上下文中不折叠，但右侧 margin 作用于下一个浮动元素的左侧，视觉上表现为“间隔”。
- 同一方向浮动的兄弟元素：相邻 margin 并存，取较大者生效（常见误解为叠加，实为“覆盖式并存”）
- 反向浮动（如一个 left、一个 right）：彼此靠近时 margin 仍独立存在，但可能因容器宽度不足导致换行，间距表现混乱
- 避免给浮动元素设 margin-bottom 来控制垂直间距——它对后续浮动元素无影响，易造成父容器高度塌陷
父容器高度塌陷导致 margin “消失”
当所有子元素都浮动后，父容器高度坍缩为 0，此时给父容器设置的 margin-top/bottom 看似“没效果”，其实是它还在，只是容器看不见了。外部元素会紧贴浮动内容的上下边缘，造成视觉错位。
- 解决方法一：给父容器触发 BFC（如 overflow: hidden 或 display: flow-root）
- 解决方法二：添加清除浮动的伪元素（::after { content: ""; display: table; clear: both; }）
- 切勿依赖给父容器设 height 或 padding 来“撑开”，这属于硬编码，不响应内容变化
用 margin 控制浮动布局间距的实用建议
比起强行用 margin 调整浮动元素位置，更可靠的方式是结合结构与 CSS 逻辑来管理间距。
立即学习“前端免费学习笔记（深入）”；
- 统一用 margin-right（左浮动）或 margin-left（右浮动）控制横向间隔，避免左右 margin 混用
- 最后一个浮动项主动清除右边距（如用 :last-child { margin-right: 0; }），防止多余空白溢出
- 需要等距分布时，优先考虑 flexbox 替代浮动；若必须用浮动，可用负 margin + 内边距模拟（如父容器 margin: 0 -5px，子项 padding: 0 5px）
- 调试时打开浏览器开发者工具，勾选“显示盒子模型”，确认 margin 是否被渲染、是否被其他规则覆盖
浮动本身已逐渐被 flex 和 grid 取代，但在维护旧项目或特定兼容场景中仍需掌握其 margin 行为。核心是记住：浮动元素脱离普通流，margin 只在同级浮动元素间“可见”，且父容器需主动清理才能正确参与外边距计算。
