并排显示两个div的最优方案是display: flex，因其无空白符间隙、无需清除浮动、父容器自动包裹且支持现代布局控制；inline-block易受html空白影响，float已过时且需清除塌陷。
两个 div 默认是块级元素，垂直堆叠；要并排显示，本质是让它们脱离文档流的默认排列方式，或改用更现代的布局模型。
用 display: inline-block 最快上手但要注意空白符
把两个 div 的 display 设为 inline-block，它们就能像文字一样水平排列：
<div style="display: inline-block; width: 200px;">左边</div> <div style="display: inline-block; width: 200px;">右边</div>
但注意：HTML 中换行或空格会被渲染成一个空格，导致两个 div 之间出现约 4px 的间隙。解决方法有：
- 把两个
div写在同一行，中间不留空格或换行 - 给父容器设
font-size: 0，子元素再单独设字体大小 - 用
margin-left: -4px手动抵消（不推荐，脆弱）
用 float 老方案，但必须清除浮动
float: left 曾是主流做法，现在不推荐新项目使用，但老代码里常见：
<div style="float: left; width: 200px;">左边</div> <div style="float: left; width: 200px;">右边</div> <div style="clear: both;"></div>
关键点：
- 两个
div都得加float: left - 父容器高度会塌陷（因为浮动元素脱离文档流），必须用
clear: both的元素或伪类清除 - 如果父容器有边框/背景色，不清理会导致视觉异常
用 display: flex 是当前最稳妥的选择
给父容器设 display: flex，子 div 默认就水平排列，且无空白符、无塌陷问题：
<div style="display: flex;"> <div style="width: 200px;">左边</div> <div style="width: 200px;">右边</div> </div>
优势明显：
- 无需额外清除，父容器自动包裹子项
- 支持
justify-content控制对齐，gap设置间距（现代浏览器） - 子项宽度可设固定值、百分比，甚至用
flex: 1等分剩余空间 - IE10+ 支持，兼容性已足够好（IE10 需加
-ms-前缀）
别踩这些坑
实际写的时候容易忽略的细节：
- 没给子
div设宽度时，inline-block和flex都可能撑满整行，看起来还是“垂直”——记得显式控制宽度或flex-basis -
float后忘记清除，父容器高度为 0，背景/边框消失，调试时容易误判为 CSS 没生效 - 用
flex时，父容器若本身是inline元素（比如span），display: flex不生效——得先确保父容器是块级或设display: inline-flex - 移动端用
flex时，别漏掉flex-wrap: wrap，否则小屏下内容会溢出
真正要用好并排，重点不是选哪个属性，而是理解每个方案的布局上下文和副作用。尤其当嵌套多层、混合响应式时，flex 的可控性远高于 inline-block 或 float。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
