float:left虽可使页码横排，但导致父ul塌陷、边框错位、hover跳动；推荐flex布局替代，简洁可靠，现代项目应优先采用。
float:left 会让页码挤成一行，但父容器容易塌陷
直接给 <li> 加 float:left 确实能让页码水平排列，但包裹它们的 <ul> 会高度为 0 —— 因为浮动元素脱离文档流，父容器“看不见”子元素了。这时候点不到分页区域、背景色不显示、外边距失效，都是这个原因。
- 必须给
<ul>加清除浮动，最简单是overflow:hidden（兼容 IE8+）或display:flow-root（现代浏览器） - 别用
clear:both加在</ul>后面的空<div>，多余且语义不清 - 如果父容器本身有
height或min-height，塌陷可能被掩盖，但实际布局仍不可靠
边框样式统一但 hover 效果错位，因为 float 不触发 BFC 边界对齐
所有 <li> 设 border:1px solid #ccc 看似整齐，但当某个页码文字变长（比如“上一页”“下一页”），或者用了不同字体粗细，float:left 下各元素基线不对齐，边框上下边缘会参差不齐，hover 时视觉跳动明显。
- 加
box-sizing:border-box确保 padding 和 border 不撑大尺寸 - 强制统一行高：
line-height:32px（和容器高度一致），并设vertical-align:middle（对 inline 元素有效，但 float 后它失效；所以更稳的是让<a>显式设display:block+height+text-align:center） - 避免用
margin控制间距，改用padding在<a>上，防止浮动间隙导致错位
IE6/7 下 float 元素间有 3px bug，现代项目可忽略但遗留系统要防
老版本 IE 对 float 的 margin 计算异常，相邻两个左浮动 <li> 之间会多出约 3px 间隙，即使 CSS 写了 margin:0 也无效。现在基本没人适配了，但如果维护政务、银行等老系统，得提前知道这坑。
- 常见绕过法：给
<li>加display:inline（IE6/7 下 float + inline 可修复） - 更稳妥的是放弃
float改用display:inline-block，配合vertical-align:top和父容器font-size:0消除间隙 - 注意
inline-block在 IE7 需要触发 hasLayout，加zoom:1即可
替代方案其实更干净：flex 布局几乎零成本替换 float
除非明确要求支持 IE9 以下，否则真没必要硬扛 float。把 <ul> 改成 display:flex，<li> 自动横排、父容器不塌陷、对齐可控、响应式也方便得多。
立即学习“前端免费学习笔记（深入）”；
- 只需两行 CSS：
display:flex+gap:4px（代替手动 margin） -
justify-content:center居中、flex-wrap:wrap应对窄屏，都比 float+media query 简洁 - 如果还要兼容 IE10/11，用
display:-ms-flexbox前缀即可，不用退回到 float
float 做分页不是不能用，而是它本就不是为这种 UI 场景设计的——它解决的是文字环绕图片这类排版问题。现在还用，等于拿螺丝刀敲钉子，能敲进去，但手疼，还容易歪。
