最后一行按钮掉下来是因为末尾按钮的 margin-right 占用多余空间；应改用 margin-left 从第二个按钮开始设置，或直接使用 flex 布局配合 justify-content 或 gap 控制间距。
用 float: left 排按钮时，最后一个总掉下来怎么办
常见现象是：按钮设了 float: left 和固定 margin-right，但最后一行按钮总被挤到下一行——不是因为内容多，而是父容器宽度不够容纳“最后一个按钮的 margin-right”。float 不会自动忽略末尾多余间距。
- 所有按钮都加
margin-right: 12px，但最后一个不该有右距，否则白占空间 - 手动给最后一个按钮加
margin-right: 0很容易漏（尤其动态渲染） - 用
:nth-child(n):last-child之类组合选择器兼容性差，IE 不认:last-child伪类 - 更稳妥的做法是改用
margin-left：第一个不设，其余全设margin-left: 12px，这样末尾没副作用
为什么现在更推荐用 display: flex 而不是 float
float 本质是为图文环绕设计的，强行用来做布局，得清浮动、算盒模型、防塌陷，纯属硬拗。而 flex 是专为一维排列优化的：
-
justify-content: space-between可让按钮两端对齐，中间等距（但首尾贴边） -
justify-content: space-around给每个按钮左右留半份间距，视觉更均匀 -
justify-content: space-evenly真正等分容器剩余空间（Chrome 84+、Firefox 72+ 支持，旧版需降级） - 不用操心清除浮动，也不用担心父容器高度塌陷
如果必须用 float，怎么写才不容易出错
核心原则：避免在末尾元素上叠加不可控的外边距。下面这个写法比全加 margin-right 更健壮：
.btn-group .btn {
float: left;
}
.btn-group .btn + .btn {
margin-left: 12px;
}
说明：
立即学习“前端免费学习笔记（深入）”；
-
.btn + .btn表示“后面紧跟着另一个 .btn 的 .btn”，即从第二个按钮开始生效 - 完全规避了“第几个是最后一个”的判断，动态增删按钮也无需改样式
- IE8+ 都支持相邻兄弟选择器，兼容性比
:last-child好得多
flex 下如何精确控制按钮间距（含 gap 兼容处理）
gap 是最直观的方案，但 Safari 14.1 之前不支持 gap 用于 flex（只支持 grid）。所以生产环境建议：
- 现代项目直接用
gap: 12px，简洁且语义清晰 - 需兼容老 Safari 或 IE，改用
margin-left+first-child重置 - 别混用
gap和margin，否则间距会叠加
例如安全写法：
.btn-group {
display: flex;
}
.btn-group .btn {
margin-left: 12px;
}
.btn-group .btn:first-child {
margin-left: 0;
}
真正容易被忽略的是：当按钮内容长度差异大时，仅靠水平排列无法保证视觉节奏一致——这时候得配合 min-width 或 flex: 1 做宽度约束，否则短文本按钮看起来像被“压缩”了。
