用 display: flex 替代 float 排列按钮组可避免塌陷、错位等问题，需为容器设 display: flex，子项默认水平排列；等宽用 flex: 1，固定宽配 flex-shrink: 0；用 gap 控间距，响应式折行用 flex-wrap: wrap 与 flex-basis 配合，小屏切 column；图文居中用 align-items/justify-content；按钮须显式设 type 属性并管理焦点环。
用 display: flex 替代 float 排列按钮组
浮动（float）在多按钮导航中极易引发父容器塌陷、换行错位、清除浮动冗余等问题，尤其在响应式场景下调试成本高。现代标准解法是给按钮容器设 display: flex，子项默认水平排列且不换行。
常见错误是只给按钮加 flex: 1 却忘了父容器没开 Flex 上下文——结果样式完全不生效。
-
nav .btn-group必须设display: flex，不是子元素自己设 - 按钮本身建议用
button或语义化a，避免用div+ JS 模拟，否则破坏可访问性 - 若需等宽分布，用
flex: 1；若需固定宽度（如图标按钮），直接设width: 48px并配合flex-shrink: 0 - 注意
gap属性替代margin控制间距，避免父子 margin 合并导致的意外偏移
响应式折行时用 flex-wrap: wrap 而非隐藏或滚动
小屏下强行保持单行会挤压按钮文字或图标，触发横向滚动条，对触摸操作极不友好。正确做法是允许自然折行，同时控制每行数量。
关键不是“能不能折”，而是“怎么折得可控”：靠 flex-basis 配合媒体查询，比单纯设 width: 20% 更可靠。
立即学习“前端免费学习笔记（深入）”；
- 默认设
flex-wrap: wrap，让按钮在空间不足时自动换行 - 用
flex-basis: calc(20% - 8px)（减去gap值）代替死写width: 20%，避免因四舍五入导致最后一项掉行 - 窄屏下（如
max-width: 768px）可切为flex-direction: column，配合align-items: stretch让按钮撑满宽度 - 避免用
white-space: nowrap强锁单行——它会破坏文本可读性，且对屏幕阅读器不友好
按钮内图文垂直居中必须用 align-items 和 justify-content
很多开发者用 line-height 或 padding 模拟居中，结果在不同字号、图标尺寸或缩放比例下频繁错位。Flex 容器原生支持轴向对齐，更稳定。
图文混排按钮（如带图标的导航项）容易忽略垂直方向控制，导致图片上浮、文字下沉。
- 按钮容器设
display: flex; align-items: center; justify-content: center; - 图标
img或svg设flex-shrink: 0防止被压缩变形 - 文字用
white-space: nowrap仅限按钮内短文本；长文本需搭配overflow: hidden; text-overflow: ellipsis; - 别依赖
vertical-align——它只对 inline 元素有效，且行为受父级line-height牵制，不可控
多个按钮共用表单时，用 type="button" 明确区分行为
把多个 button 放进同一个 form 里却不加 type 属性，是高频翻车点：浏览器默认按 type="submit" 处理，点任意按钮都会触发表单提交，打断用户操作流。
这不是兼容性问题，而是 HTML 规范强制行为——哪怕你写了 event.preventDefault()，也晚于默认提交触发。
- 每个按钮必须显式声明
type：type="button"（无提交）、type="submit"（主提交）、type="reset"（重置） - JS 绑定事件时，优先用
button[type="button"]选择器，避免误捕 submit 按钮 - 若需阻止默认行为，应在事件监听中第一时间调用
event.preventDefault()，而不是靠 CSS 隐藏按钮或禁用表单 - 不要用
input[type="button"]替代button——前者无法嵌套内容（如图标+文字），语义和可访问性都弱
最常被忽略的是按钮焦点管理：没加 outline 或用 box-shadow 模拟焦点环，会导致键盘用户完全迷失当前操作位置。这不是“美观问题”，而是 WCAG 2.1 AA 级强制要求。
