最稳实现左右并排用 display: flex，父容器设 flex 后子元素默认水平左对齐；需一左一右时用 justify-content: space-between 或 margin-left: auto；IE 兼容问题下后者更可靠；绝对定位适合脱离文档流场景，但父容器须设 position: relative；grid 适用于复杂结构如自适应+固定宽+间隙；务必统一 box-sizing: border-box 避免盒模型干扰。
用 display: flex 最稳地实现左右并排
不用浮动、不靠 Float，现代布局首选 display: flex。父容器设为 flex，两个子盒子默认就水平排列，左对齐。
常见错误是只给子元素加 float: left，结果父容器高度塌陷，或者在响应式下错位；还有人用 inline-block，但空格和换行会引入看不见的间隙。
- 父容器加
display: flex，子元素无需额外定位 - 想严格一左一右（比如左 logo、右 nav），用
justify-content: space-between - 如果右边盒子宽度不确定（如搜索框+按钮），加
margin-left: auto给右边盒子，它会自动贴右 - 注意 IE10–IE11 对
flex的部分属性支持不全，space-between在 IE 中可能失效，此时改用margin-left: auto更可靠
position: absolute 适合脱离文档流的固定位置
当左右两块内容不需要影响其他元素，也不随内容伸缩（比如右上角通知角标、侧边工具栏），position: absolute 更直接。
典型错误是只写 right: 0 却忘了给父容器加 position: relative，导致元素相对于整个页面定位，飘到不可控位置。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
position: relative，否则absolute子元素按 viewport 定位 - 左盒子用
left: 0，右盒子用right: 0，互不干扰 - 若左右盒子有宽高，且父容器没设高度，可能出现重叠——这时要手动控制
top或用transform微调 - 绝对定位的盒子不占文档流，后续兄弟元素会“无视”它们的存在，容易造成布局断层
用 grid 做更复杂的左右结构（比如带间距/自适应）
如果左右不是简单平分，而是需要留间隙、等宽、或右边固定 200px 左边自适应，display: grid 比 flex 更精准。
有人误以为 grid 太重，其实两列布局一行声明就能搞定，兼容性也已覆盖 chrome 57+/firefox 52+/edge 16+。
- 父容器设
display: grid和grid-template-columns: 1fr 200px，左边自适应，右边固定 - 加
gap: 16px控制左右间距，比用margin更干净（不会影响第一项/最后一项） - 如果右边内容可能超长，加
overflow: hidden到右盒子，避免撑破布局 - 注意
fr单位按剩余空间分配，不是按比例；1fr 1fr才是等宽，1fr 2fr不等于 1:2（受内容最小宽度限制）
别踩这些坑：margin/padding/box-sizing 的隐性干扰
左右盒子看起来没对齐、中间有缝隙、或者右边“掉下来”了，大概率不是布局方式错了，而是盒模型细节没处理好。
最常被忽略的是 box-sizing 默认值（content-box），加上 padding 或 border 后实际宽度就超了 100%，flex 或 grid 容器会自动换行。
- 所有参与布局的盒子统一加
box-sizing: border-box，让 width 包含 padding 和 border - 检查是否有隐藏的
white-space: pre或font-size: 0影响 inline 元素间隙（尤其用inline-block时） - 父容器若有
padding，而子元素用了width: 100%，实际会溢出——改用width: 100% - padding或直接 flex/grid 自动适配 - chrome devtools 里看 computed 样式，重点盯
width、border-box、flex-basis这几项，比猜快得多
真正卡住人的往往不是“怎么放左右”，而是盒子的边界行为没理清：padding 算不算宽？margin 会不会折叠？父容器有没有触发 BFC？这些细节一错，再标准的 flex 也歪。