应使用 Flexbox 替代 float: right：父容器设 display: flex + justify-content: flex-end，保持 HTML 顺序不变；避免对单个按钮设 float 导致视觉反序、塌陷及间隙问题。
float: right 会让按钮顺序颠倒，怎么保持从左到右排列？
直接对每个 button 设置 float: right 会导致 DOM 顺序反向渲染——最右边的按钮反而在 HTML 里写在最后，视觉上变成“右→左”排列。这不是右对齐，是反序堆叠。
正确做法是把按钮包进一个容器，对容器整体右对齐，内部按钮保持正常流式顺序：
- 给父容器（如
<div class="btn-group">）设置 <code>text-align: right或float: right - 按钮本身用
display: inline-block或保持默认inline行内特性（button默认就是inline） - 避免给单个按钮加
float，否则触发 BFC、换行、间隙不可控等问题
用 flex 实现更稳妥的右对齐按钮组
float 方案在响应式或复杂布局中容易和清除浮动、父容器高度塌陷打架；现代项目优先用 display: flex。
示例代码：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
.btn-group {
display: flex;
justify-content: flex-end;
gap: 8px; /* 替代 margin，更可控 */
}
.btn-group button {
/* 不需要 float，不设 width，保持内容自适应 */
}-
justify-content: flex-end是右对齐的核心，不是right或end这类模糊值 -
gap比手动写margin-right更安全，不会影响首尾外边距 - 如果按钮需换行（比如移动端），加
flex-wrap: wrap并配合justify-content: flex-end仍能保持每行右对齐
IE11 兼容时 float 方案要注意什么？
若必须支持 IE11 且不能用 flex，用 float 容器时有三个硬伤：
- 父容器必须清除浮动，否则高度塌陷——推荐用
::after伪元素清除：content: ""+clear: both - 按钮间默认有空白符（换行/空格），会多出 4px 左右间隙——删 HTML 空格、或设
font-size: 0在容器上，再重置按钮内字体 - IE11 对
inline-block的垂直对齐默认是baseline，按钮可能上下错位——统一加vertical-align: middle
按钮组右对齐但需要固定宽度怎么办？
常见场景：表单底部操作区按钮组要贴右、同时整体宽度不超过 400px。这时候别只靠 text-align 或 flex-end。
- 给容器加
max-width: 400px+margin-left: auto（配合display: block） - 或者用 flex：容器设
justify-content: flex-end，再加width: fit-content或width: max-content防止撑满 - 避免用
float: right后又加width——float 元素脱离文档流，width 表现不稳定，尤其在缩放或字体变化时
右对齐看着简单，真正卡住人的往往是顺序、间隙、塌陷这三处。先定容器策略，再管内部排列，比逐个 float 按钮靠谱得多。
