浮动实现页码导航时，a 标签必须设为块级元素
直接给 a 加 float: left 很容易失效，因为 a 默认是行内元素，浮动后虽能脱离文档流，但宽度收缩为内容宽，导致点击区域极小、对齐错乱。
- 必须显式设置
display: block或display: inline-block（后者更推荐） - 若用
block，需额外控制高度和行高来垂直居中文字；inline-block天然支持vertical-align，更易统一基线 - 不加
display仅靠float，Chrome 和 Firefox 渲染可能不一致，尤其在父容器有font-size: 0或缩进时
float 布局下，清除浮动是必须步骤
页码导航通常嵌在 nav 或 div 中，浮动的 a 会让父容器高度塌陷，导致后续内容上移、边框消失、背景色不显示。
- 最稳妥的是在父容器末尾加一个带
clear: both的空div：<div style="clear: both"></div>
- 或直接给父容器加
overflow: hidden（注意：这会隐藏溢出阴影、下拉菜单等） - 避免用
float父容器自身——它会把自己也拉出文档流，造成更大布局断裂
用 float 实现页码，间距控制比 Flex 麻烦得多
左右页码之间需要等距间隙，但浮动本身不提供间隙逻辑，全靠 margin 手动调，稍不注意就首尾多出空白或重叠。
- 推荐统一用
margin-right给每个a，再单独给最后一个加margin-right: 0 - 不要用
margin-left，否则第一个元素左侧会多出空隙 - 如果页码动态生成（如 React/Vue），需确保最后一个是可识别的（比如加
class="last"或用:last-child），否则样式会漏掉 -
float下gap属性无效，别试图用它替代margin
现代项目里，float 做页码导航已不推荐
不是不能用，而是维护成本高、响应式适配吃力、与 JS 动态更新耦合紧。浏览器兼容性看似 OK，但 IE11 及以下对 inline-block + vertical-align 的基线计算常出偏差。
立即学习“前端免费学习笔记（深入）”；
- 真正简洁的页码，应该用
display: flex+justify-content: center，一行代码对齐，天然撑高父容器 - 若必须兼容老系统（如内网 IE9），优先考虑
table-cell方案，比浮动更稳定 - 移动端点击区域小的问题，在浮动方案里几乎无法优雅解决；而
flex可轻松用padding扩展所有项
浮动没死，但它在页码这种明确有序、需对齐、常交互的场景里，已经是个容易被低估复杂度的选择。
