最直接可靠方案是 display: flex，需确保父容器有明确宽度，子元素用 flex 控制比例；避免 float 和 inline-block 的空白符问题；Grid 更语义化但需注意 fr 单位与兼容性。
用 display: flex 最直接可靠
浏览器默认把 div 当成块级元素，一个占一行，想让三个块并排，核心是改掉这个默认行为。display: flex 是目前最稳的方案，兼容性到 IE10+，现代项目基本无压力。
常见错误是只加了 display: flex 却忘了父容器宽度够不够——如果父容器本身被内容撑不开，子块再怎么 flex 也会换行。
- 父容器必须有明确宽度（比如
width: 100%或固定值），否则 flex 项可能溢出或压缩异常 - 三个子块默认会等宽分配空间；想控制比例，给子元素加
flex: 1（均分）、flex: 2（占两份）等 - 避免用
float: left—— 它会脱离文档流，后续元素容易塌陷，还得清浮动，纯属添麻烦
inline-block 能用但得防空白符
把子块设成 display: inline-block 也能并排，但它对 HTML 里换行、空格敏感：两个 div 标签之间如果有回车或空格，浏览器会渲染成约 4px 的空白间隙。
典型现象：三个块明明写了 width: 33.33%，却因为间隙导致最后一块掉下去了。
立即学习“前端免费学习笔记（深入）”；
- 解决方法之一：把父容器的
font-size: 0，子块再单独设字体大小 - 或者直接删掉 HTML 中子元素之间的所有空白（不推荐，可读性差）
- 注意子块垂直对齐方式，默认是
vertical-align: baseline，常导致上下错位，统一设成top更稳妥
Grid 布局适合固定结构但别乱用 fr
如果三个块逻辑上就是并列的“列”，display: grid 反而是语义最清晰的。但新手容易在单位上翻车。
错误写法：grid-template-columns: 1fr 1fr 1fr 看似均分，但如果某块内容超长且没设 min-width: 0，它会强行撑开整列，破坏布局。
- 安全写法：
grid-template-columns: 1fr 1fr 1fr配合每个子块加min-width: 0 - 更可控的方式：
grid-template-columns: 33.33% 33.33% 33.34%（避开 fr 计算） - IE 对 Grid 支持极差（仅支持旧语法），线上项目需确认兼容范围
别碰 float 和表格布局
现在还用 float: left 排三块？除非你在维护 2012 年的老系统。它带来的问题比解决的多：
- 父容器高度塌陷，必须额外加
overflow: hidden或伪元素清浮动 - 响应式时很难自然折行，
flex和grid原生支持flex-wrap和auto-fit -
display: table-cell同样僵硬：单元格无法设置margin，宽度计算反直觉，且语义错误（这不是表格数据）
max-width: 100% 的图，或一段没断行的长英文，会让整个 flex 或 grid 布局变形。先控内容，再调布局。 
