用 float 无法真正实现两端对齐，因其不支持空间分布；flex + justify-content: space-between 是唯一可靠解法，需设父容器 display: flex，子项不设 float 或 width。
float 元素无法真正两端对齐
用 float 实现“一排元素两端对齐”本质是伪需求——CSS 的浮动机制只负责脱离文档流并靠边，不提供分布控制能力。强行用 margin 微调看似能对齐，但只要容器宽度或子元素数量变化，就全乱套。
常见错误现象：float: left 后手动给首尾元素加 margin-left/margin-right，结果在不同屏幕下错位、最后一行塌陷、响应式断点失效。
- 浮动本身不感知父容器剩余空间，
space-between这类分布逻辑根本不存在 - 清除浮动（如
clear: both）只能解决高度塌陷，不能解决间距分配 - IE8 及更早版本虽支持
float，但连calc()都不支持，微调 margin 几乎不可维护
改用 flex + justify-content: space-between 是唯一可靠解法
justify-content: space-between 是为这种场景设计的：父容器设 display: flex，子项自动等宽分布，首尾贴边，中间均分空白。
使用场景：导航栏菜单、卡片栅格、按钮组、图标行等需要“撑满+两端锚定”的布局。
立即学习“前端免费学习笔记（深入）”；
注意几个关键参数差异：
- 必须设置父容器
display: flex，子项无需设float或width - 子项默认不换行，如需折行得加
flex-wrap: wrap，此时space-between对每行单独生效 - IE10+ 支持该属性，IE9 及以下完全不支持（无 polyfill 可靠方案）
简短示例：
nav {
display: flex;
justify-content: space-between;
}
nav a {
/* 不要设 float，也不要设 width */
}当必须兼容 IE9 或更低版本时，用 inline-block + text-align 替代
如果项目硬性要求支持 IE9，flex 就不能用，此时 text-align: justify 配合 inline-block 是少数可行路径，但有严格前提。
容易踩的坑：
- 父容器必须设
text-align: justify，且至少有一行“真实文本内容”或伪元素占位，否则无效 - 子项必须是
inline-block，且不能有换行符/空格，否则产生额外间隙（得用font-size: 0或注释 hack 抹掉） -
text-align: justify对最后一行默认左对齐，需额外加text-align-last: justify（IE10+ 才支持）
所以实际中，多数团队会选择放弃 IE9 支持，或降级为简单左对齐，而非硬上这套脆弱方案。
别忽略 flex 容器的 min-width 和子项 flex-shrink
即使用了 flex，仍可能因内容过长导致换行或溢出，表面看对齐了，实际布局已崩。
关键控制点：
- 给父容器设
min-width防止过窄时子项挤压换行 - 子项默认
flex-shrink: 1，文字多时会被压缩；如需保持最小尺寸，加flex-shrink: 0 - 若子项含图片或固定宽高元素，记得设
flex-basis或width，避免被space-between拉扯变形
复杂点在于：对齐只是表象，真正决定是否稳定的，是每个子项在不同视口下的收缩/伸展行为。这点比写对 justify-content 值重要得多。
