CSS浮动实现分页组件布局

老版本 IE 对 float 的 margin 计算异常，相邻两个左浮动

• 常见绕过法：给
• 加 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。把

改成 display:flex，
• 自动横排、父容器不塌陷、对齐可控、响应式也方便得多。
  • 只需两行 CSS：display:flex + gap:4px（代替手动 margin）
  • justify-content:center 居中、flex-wrap:wrap 应对窄屏，都比 float+media query 简洁
  • 如果还要兼容 IE10/11，用 display:-ms-flexbox 前缀即可，不用退回到 float

  float 做分页不是不能用，而是它本就不是为这种 UI 场景设计的——它解决的是文字环绕图片这类排版问题。现在还用，等于拿螺丝刀敲钉子，能敲进去，但手疼，还容易歪。

  今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~