浮动元素的margin并未失效，而是因脱离文档流导致相邻元素边距计算逻辑改变，常见于并排浮动时margin-left“消失”或与非浮动文字间margin-bottom不占空间；根本原因是父容器高度塌陷或缺少参照物，解决需触发BFC（如overflow:hidden）或改用flex/grid布局。
浮动元素的 margin 为什么看起来“失效”了
不是 margin 真的失效，而是浮动后元素脱离普通文档流，导致相邻块级元素的边距计算逻辑改变。常见表现是：两个左浮动的 div 并排时，右边那个的 margin-left 像没起作用；或者浮动元素和它后面的非浮动文字之间，margin-bottom 完全不占空间。
检查 float 元素是否触发了 margin 合并或塌陷
浮动元素本身不会和父容器发生外边距合并（margin collapse），但它可能让父容器高度塌陷，从而掩盖了你设置的 margin 效果。此时你以为边距“没生效”，其实是父容器没撑开，把子元素的下边距“吞掉”了。
- 用浏览器开发者工具选中浮动元素，看 computed 样式里
margin值是否正确应用 - 再选中父容器，检查其
height是否为0或远小于预期——这是典型塌陷迹象 - 如果父容器没有其他非浮动内容，且未清除浮动，那它的高度就只由内联内容撑开，浮动子项的
margin-bottom自然不可见
解决 margin 显示异常的常用手段
核心思路是让浮动元素的边距有“参照物”可作用，或让父容器重新包含浮动区域。
- 给浮动元素加
display: inline-block（慎用，可能引入基线对齐问题） - 用
clear: both在浮动元素后插入一个空元素（如<div style="clear:both"></div>），让它参与文档流，从而“承接”上方浮动项的margin-bottom - 更现代的做法：给父容器设置
overflow: hidden或overflow: auto（触发 BFC），强制包含浮动子项，此时子项的margin就能正常影响父容器尺寸 - 若需精确控制间距，建议改用
gap+display: flex替代float，尤其在并排布局场景下
float 和 margin 混用时的真实限制
float 是一种老式布局方式，它和 margin 的交互并不直观，尤其在响应式或嵌套结构中容易失控。
立即学习“前端免费学习笔记（深入）”；
- 浮动元素的
margin会作用于它在浮动方向上的相邻元素（比如float: left的元素，其margin-right会影响右边下一个浮动元素的左边缘） - 但垂直方向的
margin-top/margin-bottom对紧邻的非浮动兄弟元素几乎无视觉影响，因为它们不在同一文档流层级 - IE6/7 中还存在著名的“3px bug”：左浮动元素右侧会多出约 3px 间隙，常被误认为是
margin设置错误
.container {
overflow: hidden; /* 触发 BFC，防止塌陷 */
}
.item {
float: left;
width: 200px;
margin: 10px; /* 这里的 margin 会生效，但需父容器正确包含 */
}浮动本身已基本被 flex 和 grid 取代，如果只是为了实现并排或环绕效果，优先考虑这些现代方案。只有在需要兼容极老环境，或处理图文混排这种特定场景时，才值得深入调试 float 与 margin 的组合行为。
