最稳方案是父容器设 display: flex 并 align-items: center，子项自动水平排列且垂直居中；inline-block 易因空白符出缝隙，float 已淘汰。
用 display: flex 最稳，父容器加一行就搞定
两个 div 默认是块级元素，垂直堆叠。想并排，核心是让父容器“管住”子项的排列方向。现代布局首选 display: flex，兼容性好（IE10+），行为可预测。
常见错误是只给子 div 加 float 或 inline-block，结果一换字体、一加边框就错位，还容易触发 BFC 问题。
- 父容器加
display: flex，子div自动水平排列 - 加
align-items: center垂直居中（否则默认顶部对齐） - 不设宽度时，子项会按内容撑开；想等宽就加
flex: 1 - 注意：如果子
div有margin或padding，会影响实际间距，别靠猜
<div style="display: flex; align-items: center;"> <div>左边</div> <div>右边</div> </div>
用 display: inline-block 要小心空白符
老办法还能用，但 HTML 源码里换行和空格会被渲染成一个空格，导致两个 div 间出现无法忽略的缝隙。这不是 bug，是规范行为。
- 子
div设display: inline-block，父容器设font-size: 0消除间隙 - 子
div内部需重设font-size，否则文字看不见 - 垂直对齐默认基线对齐（
vertical-align: baseline），常导致上下偏移，改成top或middle - IE8 不支持
inline-block对块级元素生效（需额外 hack）
<div style="font-size: 0;"> <div style="display: inline-block; vertical-align: top; font-size: 14px;">左</div> <div style="display: inline-block; vertical-align: top; font-size: 14px;">右</div> </div>
别碰 float，除非要兼容 IE7
浮动本意是图文混排，硬拉两个 div 并排会引发父容器塌陷、后续元素上浮等问题，修复成本远高于收益。
立即学习“前端免费学习笔记（深入）”；
- 必须清浮动（比如父容器加
overflow: hidden或伪元素::after） - 子
div需显式设宽度，否则可能挤出父容器 - 响应式下宽度百分比计算易出错，
flex或grid更可控 - 现代项目里用
float布局两个栏，等于主动给自己埋雷
对齐细节：为什么看起来“没对齐”
并排后发现高低不一、文字没居中、边框不对称——大概率不是布局失效，而是默认样式干扰。
-
div默认vertical-align: baseline只对inline系元素有效，flex下得用align-items - 子
div里的p、h3有默认上下margin，会撑高容器，先重置margin: 0 - 字体行高（
line-height）不同，视觉上也会造成“没对齐”，统一设更可靠 - 边框（
border）和内边距（padding）算进盒模型，用box-sizing: border-box避免尺寸误判
真正麻烦的从来不是“怎么排成一行”，而是排完之后各种默认样式在暗处拉扯。多看一眼 computed styles，比反复调 margin 有用得多。
