使用CSS float可实现按钮组水平排列，通过float:left使按钮左对齐并添加清除浮动避免高度塌陷，结合border分隔和margin控制间距，容器设overflow:hidden或末尾加clear:both解决布局问题。
使用 CSS float 可以轻松实现按钮组的水平排列。虽然现代布局更推荐 Flexbox 或 Grid，但在一些简单场景或兼容旧浏览器时，float 依然是可行方案。
基本结构
先写出按钮组的 HTML 结构，通常用一个容器包裹多个按钮：
使用 float 实现横向排列
给每个按钮设置 float: left，让它们向左靠拢，形成一行：
.button-group button {float: left;
border: 1px solid #ccc;
background-color: #f7f7f7;
padding: 10px 15px;
cursor: pointer;
margin: 0;
border-right: 1px solid #ccc; /* 分隔线 */
}.button-group button:last-child {
border-right: none; /* 最后一个按钮去掉右边框 */
}
清除浮动避免布局问题
浮动元素会脱离文档流，可能导致父容器高度塌陷。需在按钮组末尾添加清除浮动：
立即学习“前端免费学习笔记（深入）”；
或者给容器设置 overflow: hidden 来自动包含浮动元素：
.button-group {overflow: hidden;
}
对齐与间距控制
可通过 margin 控制按钮之间的间距。若希望按钮组居中显示，可设置容器宽度并居中：
.button-group {width: fit-content;
margin: 0 auto;
overflow: hidden;
}
基本上就这些。float 方法简单直接，适合基础按钮排列，注意清除浮动即可。不复杂但容易忽略细节。
