CSS外边距如何影响浮动元素换行布局？

本文共计978个文字，预计阅读时间需要4分钟。

不是盒子变宽了，大概率是外边距在作祟。浮动元素的 margin 会和父容器、兄弟元素发生意外。特别是当相邻的浮动元素有 margin-right 或 margin-left 时，浏览器可能会判断剩余空间不足，直接把下一个浮动元素压到下一行。

• 常见现象：float: left 的两个 div，明明宽度加起来没超父容器，第二个却掉下去了
• 典型诱因：左侧浮动元素设置了 margin-right: 20px，但父容器宽度刚好卡在“内容宽 + margin”临界点上
• 注意：IE6/7 中 margin 双倍问题更明显；现代浏览器虽修复了双倍，但外边距参与布局计算的逻辑没变
• 验证方法：用开发者工具临时删掉所有 margin，看是否恢复单行——如果恢复，基本就是它

用 margin 还是 padding 控制浮动间距

优先用 padding 给浮动容器内部留白，而不是靠 margin 推隔壁元素。因为 padding 不参与浮动元素之间的空间竞争，不会触发重排换行。