多个div默认不并排是因为div是块级元素，display: block使其独占一行；inline-block间隙源于html空白符被渲染为空格；推荐用flex布局替代，它无间隙、易对齐、支持响应式。
为什么多个 div 默认不并排？
因为 div 是块级元素，浏览器默认给它加了 display: block，一上来就占满整行，后面元素只能换行。这不是你写错了，是规范行为——哪怕没写任何 CSS，div 也铁定垂直堆叠。
display: inline-block 为什么总多出 4px 间隙？
HTML 源码里的换行、缩进、空格，会被浏览器当成一个空格字符渲染；而 inline-block 元素像文字一样尊重这个空格，导致相邻 div 间出现约 4px 的不可见间隙。尤其在三列等宽布局（如 width: 33.333%）时，总宽度轻松超 100%，第三列直接掉行。
- 临时解法：父容器设
font-size: 0，子div再单独设回字体大小 - 更稳妥做法：把 HTML 标签写成一行，删掉所有换行和缩进（可读性差，不推荐长期维护）
- 根本解法：别用
inline-block，换flex
用 display: flex 实现并排最省心
父容器加 display: flex，子 div 就自动水平排列，无空白干扰、无塌陷、无需清除浮动。现代项目首选它，IE10+ 都支持，2026 年已无兼容顾虑。
- 两列等宽：
flex: 1给每个子div，或直接设width: 50% - 三列等分：
flex: 1+ 父容器gap: 8px控制间距（比margin更干净） - 不同高度也能对齐：加
align-items: flex-start防止底部错位 - 如果内容溢出导致换行，加
flex-wrap: nowrap强制单行
浮动（float）现在还该用吗？
能用，但代价高：子元素脱离文档流，父容器高度塌陷，必须额外加 clear: both 或伪类 ::after 清除，稍不注意背景色/边框就显示不全。它适合极老项目兼容，或某些特殊图文环绕场景，但纯并排布局没必要扛这风险。
- 常见翻车点：忘了给父容器清除浮动，结果后续元素往上跑
- 替代方案更可靠：用
flex后，连clear这个词都很少写了
真正容易被忽略的是：并排不是目的，响应式才是常态。比如用 flex 时，flex-wrap: wrap 和媒体查询配合，才能让三列在小屏自动变单列——这点光靠“并排”两个字根本覆盖不到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
