掌握margin与padding的区别及box-sizing的使用，能精准控制浮动布局间距：margin用于外部间隔，padding调整内部留白，配合:last-child清除多余边距，避免换行问题，提升布局美观与兼容性。
浮动布局中控制间距，关键在于理解 margin 和 padding 的作用机制，并根据结构合理搭配。浮动元素之间的距离不仅影响美观，也关系到响应式表现和浏览器兼容性。
理解 margin 与 padding 的区别
在浮动布局中：
- margin 是元素外边距，控制元素与其他元素之间的距离
- padding 是内边距，控制内容与元素边框之间的空间
若想让两个浮动盒子之间有空隙，使用 margin 更合适；若想让内容不贴边，则用 padding 调整内部空间。
避免外边距重叠与塌陷
浮动元素不会发生垂直方向的 margin 重叠，但水平方向的 margin 需手动设置。常见问题：
- 给同一行的多个左浮动元素设置
margin-right，最后一个元素可能多出空白，导致换行 -
解决方法：为最后一个子元素添加
:last-child { margin-right: 0; } - 或使用
margin-left统一右对齐留白（反向思维）
padding 用于内部留白，提升可读性
浮动容器内的内容容易紧贴边界，影响视觉体验。合理设置 padding 可改善：
- 给浮动的 div 添加
padding: 10px;让文字与边框保持距离 - 注意：padding 会增加元素总宽度（除非使用
box-sizing: border-box;） - 推荐始终设置
* { box-sizing: border-box; }，避免计算失误
margin + padding 协同布局实例
例如三列等宽浮动布局：
.col {
float: left;
width: 30%;
margin-right: 5%;
padding: 15px;
box-sizing: border-box;
}
.col:last-child {
margin-right: 0;
}
- 每列占 30%，间隔 5%，最后一列去除 margin 防换行
- 内部 padding 保证内容不拥挤
- box-sizing 确保 padding 不撑破布局
基本上就这些。掌握 margin 控制外部间距、padding 调整内部空间，再配合 box-sizing 和伪类清除多余边距，浮动布局的间距就能精准掌控。虽然现代开发多用 Flex 或 Grid，但在维护旧项目时，这套方法依然实用。
