display: flex 是最可靠兼容IE10+的左右对齐方案，需配合 justify-content: space-between 和 align-items: center 实现水平分布与垂直居中，避免浮动、绝对定位及空白符干扰。
display: flex 是目前最可靠、兼容性足够（IE10+）的左右对齐方案，不用浮动、不依赖空白符处理，也不用 position: absolute 手动算偏移。
用 display: flex 实现左右对齐
父容器设 display: flex，子元素默认水平排列；加 justify-content: space-between 可让第一个靠左、最后一个靠右，中间留空：
<div style="display: flex; justify-content: space-between;"> <div>左边</div> <div>右边</div> </div>
常见错误是只设了 display: flex 却没控制主轴对齐，结果两个 div 紧挨着左对齐。如果要“左一个、右一个、中间无内容”，space-between 比 flex-start + margin-left: auto 更直观。
- 若需左侧固定宽、右侧自适应，给左
div设flex: 0 0 200px，右div不设或设flex: 1 - IE10–IE11 中
justify-content: space-between有效，但不支持gap，间距得用margin控制 - 避免在 flex 容器里混用
float—— 浮动元素会脱离文档流，导致对齐失效
老项目要兼容 IE8–IE9 怎么办
只能退回到 display: inline-block + font-size: 0 方案，因为 float 在响应式场景下容易塌陷，且清除浮动（clear: both）必须显式处理，否则后续内容会上移。
立即学习“前端免费学习笔记（深入）”；
关键点不是“能不能并排”，而是“能不能稳定不换行”：
- HTML 中两个
div标签之间不能有换行或空格，否则渲染为约 4px 的空白间隙 - 更稳妥的做法：父容器设
font-size: 0，每个子div单独设font-size: 14px和display: inline-block - 别依赖
vertical-align: middle对齐——文字行高、图片基线不同，高度稍有差异就错位
为什么不用 float: left + float: right
表面能实现左右贴边，但隐患明显：
- 父容器高度塌陷：若没触发 BFC（比如没设
overflow: hidden），后续内容会顶上来 - 左右元素无法垂直居中对齐，除非额外包裹并设
line-height或transform: translateY - 响应式断点时，
float元素可能意外换行，而 flex 容器可配合flex-wrap: wrap主动控制
除非维护一个明确禁用现代 CSS 的遗留系统，否则不建议主动选 float 布局。
对齐后内容垂直居中总不对齐？
左右两个 div 高度不一致时，仅靠 display: flex 无法自动拉平；必须加 align-items: center（主轴为水平时，该属性控制交叉轴即垂直方向）：
<div style="display: flex; justify-content: space-between; align-items: center; height: 60px;"> <div>左文字</div> <div><img src="icon.png" height="24"></div> </div>
注意：如果父容器没设明确高度，align-items: center 效果可能不明显；此时要么设 min-height，要么确保子元素有可参考的基准线（比如都含行内元素）。
真正容易被忽略的是：左右对齐不是“把两个块放过去就行”，而是要同步考虑它们的基线、高度继承、以及父容器是否形成 BFC 或 flex context —— 这些细节一旦漏掉，视觉上就会“差那么一像素”。
