浮动元素的margin不参与外边距合并但会导致父容器塌陷和相邻元素错位；应优先用padding或清除浮动（如clearfix）解决，现代布局推荐Flexbox/Grid替代float。
浮动元素的 margin 折叠和塌陷问题
浮动元素本身脱离普通文档流，margin 不再参与常规的外边距合并（margin collapse），但会引发父容器高度塌陷、相邻非浮动元素错位等“看似不一致”的表现。这不是 margin 值没生效，而是渲染逻辑变了。
常见现象：float: left 的盒子设置了 margin-bottom: 20px，但下方文字紧贴着它顶部；或者多个浮动子项之间垂直间距忽大忽小。
- 根本原因：浮动元素的
margin只作用于自身在浮动方向上的相邻块，对父容器和其他非浮动兄弟元素“不可见” - 解决思路：不用依赖 margin 控制浮动元素之间的垂直距离，改用
padding或额外包裹层隔离 - 若必须用 margin，请确保所有参与布局的元素都处于同一浮动上下文（例如全部
float: left），并统一设置margin-right/margin-bottom
padding 替代 margin 实现视觉一致性
当浮动元素需要固定间距时，对容器内部加 padding 比对外部设 margin 更可控。因为 padding 属于盒模型内部尺寸，不受浮动脱离文档流的影响。
示例场景：横向排列三个浮动卡片，每张卡片之间需 16px 间隙：
立即学习“前端免费学习笔记（深入）”；
.card {
float: left;
width: calc(33.333% - 16px); /* 预留 padding 空间 */
padding-right: 16px; /* 用 padding 制造右间隙 */
}
.card:last-child {
padding-right: 0; /* 最后一个不加 */
}- 避免用
margin-right，否则最后一项仍占空白位，可能换行 - 如果卡片有背景或边框，
padding还能保证内容与边界始终等距 - 注意
box-sizing: border-box必须开启，否则width + padding超出预期
清除浮动后 margin 行为恢复正常
一旦父容器正确清除浮动（如使用 ::after 伪元素），其内部浮动子元素的 margin 就不再“失效”，此时可以安全使用标准 margin 布局。
推荐清除方式（兼容性好且不影响语义）：
.clearfix::after {
content: "";
display: table;
clear: both;
}- 给父容器添加
class="clearfix"后，该容器能包裹住所有浮动子项 - 此时子项的
margin-top/margin-bottom对父容器生效，可用来控制上下间距 - 但要注意：清除浮动后的父容器若也参与更高层浮动，它的
margin仍可能被忽略——这种嵌套浮动是真正难调试的点
现代替代方案：直接放弃 float 做布局
所有关于浮动中 margin/padding “不一致”的纠结，本质是旧布局模型的副作用。CSS Grid 和 Flexbox 天然规避这些问题。
- 横向排列用
display: flex，间隙统一用gap，无需计算宽度、无需清除浮动 - 响应式网格用
display: grid+grid-template-columns，margin行为完全符合直觉 - 仅在需要兼容 IE8–IE9 时才考虑浮动；否则强行规范浮动内外边距，不如切换布局模式
真正容易被忽略的是：很多人试图用 margin 修复浮动导致的父容器塌陷，却忘了最简单的解法是——不让它塌陷，或者干脆不用它塌陷。
