直接用 display: flex 是当前最省事、最不容易出错的方案；其他方法要么要处理空白符，要么得清浮动，要么兼容性差。父容器设 display: flex 就够了，子元素默认横向排列，无需额外设置 float 或 inline-block，也不用担心换行、间隙或塌陷问题。

直接用 display: flex 是当前最省事、最不容易出错的方案；其他方法要么要处理空白符，要么得清浮动，要么兼容性差。

父容器设 display: flex 就够了

不需要改子 div 的任何样式，也不用担心换行、间隙或塌陷问题：

• 给包裹多个 div 的父容器加 display: flex
• 子 div 默认横向排列，无需额外设置 float 或 inline-block
• 想等宽就给每个子 div 加 flex: 1；想固定宽度直接设 width
• 加 gap: 8px 能统一控制间距，比 margin 更干净

示例：

<div style="display: flex; gap: 8px;">
  <div style="width: 200px;">卡片1</div>
  <div style="width: 200px;">卡片2</div>
  <div style="width: 200px;">卡片3</div>
</div>

为什么 inline-block 容易错位

看似简单，但 HTML 源码里的换行和空格会被渲染成约 4px 的空白间隙：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

立即学习“前端免费学习笔记（深入）”；

• 即使每个 div 设了 width: 33.333%，加上间隙后总宽超 100%，第三列就掉行
• 必须在父容器设 font-size: 0，再在子元素里重置 font-size
• 还得显式写 vertical-align: top，否则默认按基线对齐，上下错位
• 一旦漏掉某处重置字体大小，布局就崩

float: left 现在基本不该用

它会让父容器高度塌陷，后续元素上移覆盖——这不是“没写 clear”这么简单：

• 浮动元素脱离文档流，父容器无法自动包裹内容
• 清浮动要用 ::after 伪元素或 overflow: hidden，多写几行冗余代码
• 响应式断点里 float 行为不稳定，尤其配合百分比宽度时
• 和 flex 混用会冲突，浏览器可能忽略部分声明

IE10–11 兼容性要注意什么

如果项目真要支持 IE10/11，flex 不是不能用，但别用缩写：

• 避免 flex: 1，改用完整写法 flex: 1 1 auto
• 别用 gap（IE 完全不支持），改用 margin 控制子项间距
• 父容器加 flex-wrap: nowrap 显式禁止换行，防止某些旧引擎误判

真正麻烦的不是写法本身，而是当多个 div 宽度加起来接近 100% 时，不同浏览器对小数精度的处理差异会暴露出来——这点常被忽略。