text-align-last 对 float 元素无效，因其脱离文档流、不构成适用的块级容器；需改用 inline-block、table-cell、flow-root 或伪元素方案实现两端对齐。
text-align-last 在浮动元素里根本不起作用
直接说结论：text-align-last 对 float 元素内部的文本**无效**。它只对块级容器中最后一行文本生效，而浮动元素（float: left 或 float: right）本身会脱离文档流、变成“行内块级上下文”，浏览器通常不把它当作 text-align-last 的适用容器。
为什么 float + text-align-last 看起来没反应
常见错误现象是：给浮动的 <div> 设置了 <code>text-align: justify 和 text-align-last: justify，但最后一行始终左对齐。
-
float触发的是 BFC（块格式化上下文），但它的内部文本排版逻辑更接近“单行行内盒”，不参与多行两端对齐的计算 -
text-align-last依赖父容器明确的宽度和换行行为，而浮动元素常因内容撑开、无固定宽，导致浏览器跳过该属性 - 多数浏览器（Chrome/Firefox/Safari）在浮动元素上忽略
text-align-last，属于符合规范的行为，不是 bug
真正能用 text-align-last 的替代写法
想实现“浮动布局下文字两端对齐”，得绕开 float，改用现代布局方式，同时保留原有视觉效果：
- 把原浮动容器换成
display: inline-block或display: table-cell，它们支持text-align-last - 若必须保持浮动语义（比如图文混排中的左图右文），用
display: flow-root包一层再设text-align: justify，最后一行靠 JS 补全或接受默认左对齐 - 更稳妥的做法：放弃
text-align-last，用伪元素 +width: 100%模拟最后一行拉伸（仅限单段落）
示例（兼容性好）：
.justify-wrap {
text-align: justify;
}
.justify-wrap::after {
content: '';
display: inline-block;
width: 100%;
}
float 布局下两端对齐的实际取舍点
真实项目里，如果还在用 float 做整体布局，说明大概率处于老系统维护阶段——这时候硬推 text-align-last 不仅无效，还会增加调试成本。
立即学习“前端免费学习笔记（深入）”；
- 优先检查是否真需要“最后一行也拉满”：多数设计稿里，最后一行左对齐是可接受的
- 如果必须对齐，用
text-align: justify+ 伪元素方案最轻量，且不影响浮动结构 - 注意
text-align-last本身兼容性有限（IE10+、Edge12+，但 Safari 一直有 bug），别在关键路径上依赖它
浮动布局本身就在退场，与其花时间 patch 它的文本对齐，不如确认下能否把那个容器升级成 flex 或 grid ——那才是两端对齐真正稳的地方。
