text-align: justify 仅对行内内容生效，需配合固定宽度且不适用于块级元素布局；flexbox 的 justify-content: space-between 和 grid 布局才是现代两端对齐的首选方案。
text-align: justify 只对行内内容生效
直接给 div 或 section 设 text-align: justify，只会影响它内部的纯文本、span、img 等行内级内容的**最后一行以外的两端对齐效果**；块级子元素（如另一个 div）完全不受影响。常见误用是给导航栏父容器加 text-align: justify，结果菜单项依然堆叠或左对齐——因为它们是块级元素。
适用场景：多段落新闻正文、说明文字等需要排版整齐的纯文本流。不适用于“左 logo + 右按钮”这类结构化布局。
- 必须配合明确宽度（如
width: 100%或容器有约束），否则无实际效果 - 最后一行默认左对齐，若需强制两端对齐，得用
text-align-last: justify（注意 Safari 旧版本支持差） - 中文两端对齐易出现字间距过大，建议搭配
letter-spacing微调或改用text-justify: inter-ideograph（仅 Firefox 支持）
flexbox 的 justify-content: space-between 是最常用方案
这是实现“左区 + 右区”物理分离的首选方式，语义清晰、行为可预测。关键点不是给左右两个元素各自设样式，而是把它们放进**同一个父容器**，并对该父容器启用弹性布局。
典型 HTML 结构：
立即学习“前端免费学习笔记（深入）”；
<nav> <div class="nav-left"></div> <div class="nav-right"></div> </nav>
CSS 必须写在 <nav></nav> 上：
nav {
display: flex;
justify-content: space-between;
}
- 如果中间还要加居中区域（比如 logo 在左、菜单在中、登录在右），就用三兄弟结构 +
margin-left: auto和margin-right: auto配合 - 移动端折叠后，
justify-content: space-between仍会生效，可能把右区挤出视口——记得在@media (max-width: 768px)中切回flex-direction: column - 别在
.nav-left或.nav-right上加margin-left: auto，会干扰space-between的计算逻辑
grid 布局适合多区域、响应式强的导航结构
当导航包含 logo（左）、主菜单（中）、用户操作（右）三个明确区域，且需独立控制每块宽度/换行逻辑时，display: grid 比 flex 更直观。
示例：
nav {
display: grid;
grid-template-columns: max-content 1fr max-content;
align-items: center;
}
-
max-content让 logo 和右按钮按内容撑宽，1fr让中间菜单占满剩余空间 - 换行控制更精细：用
grid-auto-flow: dense或grid-row显式指定区域位置 - 兼容性没问题（Chrome 57+/Firefox 52+/Safari 10.1+），但 IE11 需用
-ms-grid前缀（已基本淘汰） - 如果某区域内容超长导致挤压其他列，加
minmax(0, max-content)或设overflow: hidden防止溢出
float 已过时，新手务必绕开
用 float: left 和 float: right 实现两边对齐，看似简单，但实际埋了三颗雷：
- 父容器塌陷：
nav高度变成 0，背景色/边框消失，必须额外加overflow: hidden或伪元素清除浮动 - 响应式失效：窄屏下右浮动元素可能掉到下一行，且无法用媒体查询优雅重排
- 文字环绕：右栏里的
p文字会自动绕到左栏图片/盒子右侧，除非每个段落都加clear: both
现代项目里还看到 float 做导航对齐，基本可以判定是维护性风险点。Flex 和 Grid 的浏览器支持早已覆盖所有主流环境，没必要为兼容 IE8–9 牺牲可读性和健壮性。
真正容易被忽略的是层级关系：所有对齐能力都由父容器的显示模式（flex / grid）决定，而不是子元素自己“设置个属性就能飞过去”。结构一嵌套错、多一层无关的 position: relative 或 display: inline-block，整个对齐逻辑就静默崩塌。
