浮动元素的 margin 常“失效”是因为其脱离普通文档流，垂直方向 margin 被忽略或合并；水平 margin 通常有效，垂直间距宜用 padding 或 bfc 解决；现代布局应优先使用 flex 或 grid。
浮动元素的 margin 为啥经常“失效”
因为浮动元素脱离了普通文档流，相邻浮动项之间的 margin 会出现合并或被忽略的现象——尤其是垂直方向上的 margin-top 和 margin-bottom。这不是 bug，是 CSS 规范定义的行为。
常见错误现象：float: left 的多个 div 并排后，上下间距消失，只靠 margin-right 或 margin-left 能“看到”效果。
- 垂直 margin 合并只发生在**普通流内块级盒之间**，浮动元素不参与这个合并规则，但也不保证“生效”——浏览器可能直接忽略
- 水平方向的
margin（如margin-right）通常可靠，适合控制左右间距 - 若想用垂直 margin 控制浮动项高度间隙，得额外触发 BFC 或用 padding 替代
用 padding 替代 margin 控制浮动项内部留白
当目标是让浮动元素自身“撑开”周围空间（比如文字环绕时避免紧贴），padding 比 margin 更可控，且不影响其他浮动项布局逻辑。
使用场景：图文混排中，让图片右浮动后，右侧文字不紧贴图边缘；或多个浮动卡片需要统一内边距。
立即学习“前端免费学习笔记（深入）”；
-
padding作用于元素盒模型内部，不会触发外边距合并，也不会因浮动而失效 - 如果浮动项有背景色或边框，
padding还能自然扩展可点击/可交互区域 - 注意：
box-sizing: border-box要提前设好，否则width + padding可能超容器
清除浮动后，外层容器的 margin 才真正起作用
浮动元素会让父容器高度塌陷，此时你在父容器上设 margin-bottom，看起来像“没反应”——其实它在，只是父容器没高度，视觉上被压没了。
性能与兼容性影响：老式 clear: both 方法简单但需额外 DOM 节点；现代推荐用 overflow: hidden 或 display: flow-root（IE 不支持后者）。
- 给浮动父容器加
overflow: hidden是最轻量的修复方式，但会裁剪溢出内容 -
display: flow-root是语义更准确的 BFC 触发方式，无裁剪副作用，Chrome 58+ / Firefox 53+ 支持 - 别在浮动项本身加
clear来“模拟间距”，这会强制换行，破坏并排布局
现代替代方案：别用 float 做布局了
如果你还在用 float 实现多栏、网格或卡片排列，margin 间距问题只是冰山一角——对齐、响应、垂直居中、重排都会反复踩坑。
真正该做的不是“怎么修 float 的 margin”，而是换技术栈：
- 单行多列用
display: flex，gap属性直接控制项间间距，完全无视浮动那一套 - 二维网格布局用
display: grid，grid-gap（或gap）同样原生支持行列间距 - 所有主流浏览器已支持
gap（包括 Safari 14.1+），IE 是唯一拦路虎；若必须兼容 IE，可用margin配合:not(:last-child)模拟
浮动现在只该用于文字环绕（float: left/right on img）这类纯内容排版场景。一旦涉及结构、间距、响应，它就不是“能用”，而是“不该用”。
