直接用 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 的空白间隙：

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

• 即使每个 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% 时，不同浏览器对小数精度的处理差异会暴露出来——这点常被忽略。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！