现代分页组件应使用 display: flex 而非 float，因 float 会导致父容器塌陷、基线错位、hover 跳动等问题，而 flex 天然撑高、支持 gap 和 justify-content，无需清除浮动；gap 比 margin 更安全控制间距；边框与圆角需精细化控制首尾项；active 和 disabled 状态须兼顾可访问性。
现代分页组件应直接用 display: flex，别碰 float —— 它带来的塌陷、对齐错位、hover跳动等问题，在 Flex 下全都不复存在。
为什么必须用 display: flex 替代 float
浮动会让 <ul> 高度塌陷为 0，导致背景色不显示、点击区域丢失、外边距失效；float 还不触发 BFC，各 <li> 基线无法对齐，边框上下参差，hover 时视觉跳动明显。而 display: flex 天然撑开父容器、自动水平排列、支持 gap 和 justify-content，连清除浮动的 hack 都不用写。
-
overflow: hidden或display: flow-root是 float 塌陷的补救，不是正解 -
vertical-align在 float 下基本失效，靠它对齐是徒劳 - IE6/7 的 3px 间隙 bug 虽已过时，但若维护老系统，仍需警惕
gap 比 margin 更安全地控制页码间距
用 margin 给每个 <li> 加左右间隔，首尾会多出空白，响应式换行时还容易错位；gap 只作用于 flex item 之间，干净、可控、无边缘副作用。
- 写法：
.pagination ul { display: flex; gap: 8px; } - 小屏可配合
flex-wrap: wrap+row-gap: 4px控制多行间距 - 如果需兼容 IE10/11，加
display: -ms-flexbox前缀即可，无需退回到 float
边框与圆角必须按位置精细化控制
所有页码按钮统一设 border: 1px solid #ccc 看似简单，但相邻按钮的左右边框会重叠，必须手动剥离：
立即学习“前端免费学习笔记（深入）”；
- 首项去左框：
.pagination li:first-child a { border-left: none; border-radius: 4px 0 0 4px; } - 末项去右框：
.pagination li:last-child a { border-right: none; border-radius: 0 4px 4px 0; } - 中间项保留完整边框，但不设圆角，避免“圆角打架”
- 禁用状态（如“上一页”在第一页）要显式加
pointer-events: none，不能只靠透明度或颜色降级
active 与 disabled 状态不能只靠颜色区分
仅改背景色或文字色，对色觉障碍用户不友好，也缺乏交互反馈强度。必须组合多个属性：
- 当前页用
.active类，并添加aria-current="page"属性 - 禁用按钮同时设置：
opacity: 0.5+cursor: not-allowed+pointer-events: none - hover 效果应排除
.active和:disabled：a:hover:not(.active):not(:disabled) - 移动端需加
min-width: 32px和padding匹配line-height，防止点不准
真正难的不是写出来，而是让每种状态都可感知、可聚焦、可缩放、可键盘操作——这些细节在 flex 布局里很容易被忽略，但一上线就暴露在真实用户面前。
