text-align: justify 在浮动元素中失效，是因为浮动使元素脱离文档流且常为 width: auto，导致无明确宽度供浏览器计算可分配空白区域；必须设置固定宽度或 min-width 才能触发两端对齐。
text-align: justify 在浮动元素里为什么失效
因为 float 会让元素脱离文档流，而 text-align: justify 只对**块级容器内最后一行前的行**起作用——前提是容器有明确宽度且内容足够撑开多行。浮动元素本身常被设为 width: auto（由内容决定），导致浏览器无法计算“可分配空白区域”，justify 就没东西可分。
必须给浮动容器设置固定宽度或 min-width
这是最常被忽略的前提。justify 不是“自动拉伸文字”，而是按容器可用宽度做空格重分布。浮动块若没显式宽度，渲染时宽度≈内容宽度，自然只剩一行，justify 无从触发。
- 用
width或min-width给浮动的<div> 或 <code><p></p>设定最小可用宽度（比如min-width: 300px） - 避免用
width: fit-content或width: max-content，它们会退化为单行 - 如果父容器也浮动，注意外层是否同步设置了宽度，否则连锁失效
- 加
text-align-last: justify让末行也两端对齐（注意 IE 不支持） - 对可能溢出的文本加
word-break: break-word或overflow-wrap: break-word，防止单个长词破坏布局 - 慎用
letter-spacing强行模拟 justify——它会破坏可读性和语义，且不响应字体缩放
justify 效果弱？补上 text-align-last 和 word-break
默认情况下，text-align: justify 不处理最后一行（通常左对齐），且遇到长单词（如 URL、技术名词）会撑破容器。需要组合控制：
更稳的替代方案：flex + text-align: justify 配合伪元素
纯浮动 + justify 容易在响应式场景下断裂。现代稳妥做法是放弃浮动，改用 display: flex 布局，再对文字容器启用 justify：
立即学习“前端免费学习笔记（深入）”；
.line {
display: flex;
}
.line .text {
text-align: justify;
width: 100%;
min-width: 0; /* 允许 flex item 收缩，避免溢出 */
}如果仍需兼容老浏览器且坚持浮动，记得在 justify 容器末尾加一个 <span></span> 并设 width: 100% —— 这能“骗”浏览器认为有足够空间重排空格，尤其在只有一两行时有效。
浮动布局本身已过时，justify 的行为又高度依赖容器尺寸和内容断行逻辑，两者叠加后调试成本高。真要保兼容，优先考虑用 inline-block 替代 float，它既保持文档流参与性，又支持 justify。
