最快见效的是 display: inline-block，但需处理空白符缝隙；float 兼容旧版但需清除浮动；flex 是当前首选，注意 ie10–11 兼容性；grid 适合固定列布局，ie 不支持。
用 display: inline-block 最快见效，但要注意空白符
两个 div 默认是块级元素，天然换行。设成 inline-block 是最直觉、兼容性也好的办法，IE8+ 都支持。
常见错误现象：设了 display: inline-block 后，两个 div 之间仍有缝隙，看起来没贴紧。
- 这是 HTML 中换行/空格被渲染成一个空格字符导致的，不是 CSS bug
- 解决方法之一：把两个
div标签写在同一行，中间不留空格或换行 - 更稳妥的做法：给父容器加
font-size: 0，子元素再单独设font-size（注意内联文本会失效） - 别忘了给每个
div设宽度，否则可能因内容撑开而换行
用 float 老法子，但得处理父容器塌陷
虽然 float 已不算现代方案，但在老项目或简单布局里仍常见，尤其要兼容 IE7–8 时。
使用场景：不需要弹性响应，且父容器高度必须包裹子元素。
立即学习“前端免费学习笔记（深入）”；
- 给两个
div分别加float: left - 父容器必须清除浮动，否则高度塌陷——常用
overflow: hidden或伪元素::after清除 -
float元素会脱离文档流，后面兄弟元素可能“上浮”进空隙，需留意布局顺序 - 不推荐在 Flex/Grid 可用环境下还用它，维护成本高
用 display: flex 是当前首选，但注意 IE10–11 的坑
父容器设 display: flex，子 div 默认就水平排列，代码干净，响应式友好。
容易踩的坑集中在兼容性和默认行为：
- IE10–11 对 Flex 的实现有差异，比如
flex: 1在 IE11 下可能不收缩，建议显式写flex: 1 1 auto - 默认
flex-wrap: nowrap，内容超宽时不会换行，可能溢出；需要换行得手动加flex-wrap: wrap - 如果子
div没设宽度，又内容长短不一，可能分配不均——用flex-basis或固定width控制更稳 - 移动端 Safari 旧版本对
align-items有渲染偏差，垂直居中建议搭配min-height验证
用 display: grid 简洁但别忽略基础限制
适合明确列数和尺寸的场景，比如双栏卡片、表单左右标签+输入框。
参数差异小，但初始化成本略高：
- 父容器设
display: grid+grid-template-columns: 1fr 1fr就能均分两列 - 不设
grid-gap就没间隙，比flex更“严丝合缝” - IE 完全不支持
display: grid（包括 IE11），除非项目已放弃 IE - Grid 不会像 Flex 那样自动根据内容调整主轴方向，想换行得用
grid-auto-flow: column等额外配置
box-sizing、子元素的 margin 和 padding，这些看似无关的属性，常常才是两个 div 没真正并排的真正原因。 
