text-align: right仅对行内或inline-block子元素有效；margin-left: auto需父容器display: flex；position: absolute需父容器设position: relative；float: right已不推荐用于布局。
用 text-align: right 让子元素右对齐（最常用但易误解）
很多人试了 text-align: right 发现没效果，其实是用错了地方：它只对**行内元素或 inline-block 子元素**起作用，不是直接“把 div 往右推”。
适用场景：父容器宽度固定/已知，内部是文字、span、按钮等行内内容，想整体靠右。
- 父
div必须设置text-align: right - 子
div需加display: inline-block（否则仍是块级，不响应text-align） - 如果子
div宽度 100%，inline-block会失效——得先收窄或设max-width
<div style="text-align: right;"> <div style="display: inline-block; background: #eee;">我靠右了</div> </div>
用 margin-left: auto 实现块级右对齐（推荐用于 Flex 布局）
这是现代布局中最可靠的方式，前提是父容器启用 Flex：它让浏览器自动把剩余空间塞到左边，把元素“挤”到右边。
常见错误：只写 margin-left: auto 却忘了给父元素加 display: flex，结果完全没反应。
- 父元素必须有
display: flex - 子
div加margin-left: auto即可右对齐（不用设宽度） - 若父容器还用了
justify-content，它会被margin覆盖——margin优先级更高 - 兼容性好（IE10+），比
float更可控
<div style="display: flex;"> <div style="margin-left: auto; background: #eee;">我靠右了</div> </div>
用 position: absolute 精确右贴边（适合脱离文档流场景）
当你要让一个 div 死死贴在父容器右边缘（比如右上角关闭按钮），且不占位、不影响其他元素时，这是最直接的解法。
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
容易踩的坑：父容器没设 position: relative，导致子元素相对于整个页面定位，飘走。
- 父容器必须设
position: relative（或absolute/fixed） - 子元素设
position: absolute; right: 0 - 若还要控制上下位置，加
top或bottom（如top: 10px） - 注意：该元素脱离文档流，后续兄弟元素会“无视”它的存在
<div style="position: relative; height: 200px;"> <div style="position: absolute; right: 0; top: 0; background: #eee;">右上角</div> </div>
别用 float: right（除非维护老项目）
虽然它确实能让 div 右对齐，但副作用太明显：父容器高度塌陷、清除浮动麻烦、响应式下难控制。现在基本没有非用不可的理由。
如果你看到别人代码里还在用，大概率是因为没改完 legacy 逻辑，或者没意识到 Flex 已经覆盖全部需求。
- 必须配
clear: both清除浮动，否则父容器“看不见”子元素高度 - 多个
float: right元素会从右往左排列，和直觉相反 - Flex 和 Grid 出来后，
float的语义只剩“文字环绕图片”，不该用来做布局
真正要注意的不是“选哪个方法”，而是父容器的定位上下文是否就绪——absolute 缺 relative 父级、flex 忘了设父容器、text-align 对块级子元素无效，这三类问题占了实际调试时间的八成。
