margin-left: auto 能让块级元素靠右，但必须满足两个硬性条件：元素要有明确宽度，且不能是浮动或绝对定位状态；在 flex 容器中则无需设宽度，直接生效并覆盖 justify-content 对该元素的影响。
margin-left: auto 能让块级元素在父容器内靠右，但必须满足两个硬性条件：元素要有明确宽度，且不能是浮动或绝对定位状态。不满足就完全没效果。
为什么 margin-left: auto 有时不起作用
常见错误是直接给一个默认 display: block 的 div 写 margin-left: auto，却忘了它默认 width: auto —— 这时浏览器无法计算“剩余空间”，auto 外边距被忽略。
- 必须显式设置
width（如width: 200px或width: fit-content） - 父容器不能是
float、absolute或fixed定位上下文（否则可能触发怪异的包含块行为） - 不能同时设
float或position: absolute，这两者会让margin-left: auto失效 - 如果父容器用了
text-align: center，它不影响块级子元素位置，但容易让人误判原因
margin-left: auto 在 Flex 容器里的特殊行为
在 display: flex 父容器中，margin-left: auto 的作用完全不同：它会把该子元素和它右边的所有兄弟元素“推到最右”，而左边留空。这是目前最干净的单元素右对齐方案，且无需设宽度。
- 适用于只想推某一个子项（比如操作按钮）到右侧，其余保持左对齐的场景
- 比
justify-content: flex-end更精细 —— 后者会让所有子元素一起右移 - 注意：若该元素是
flex项目，margin-left: auto优先级高于justify-content，会覆盖后者对该元素的影响
兼容性与替代风险点
margin-left: auto 在所有现代浏览器中稳定支持，IE11 也 OK，但它对 inline 元素无效，也不能和 margin-right: auto 同时用于居中（除非宽度固定）。
- 别用
margin-right: 0配合margin-left: auto——margin-right值为0不参与对齐计算，纯属冗余 - 如果父容器是 Grid，
margin-left: auto依然有效，但更推荐用justify-self: end，语义更准确 - 当需要响应式右对齐（比如小屏时取消右对齐），
margin-left: auto本身不支持媒体查询切换，得配合类名控制显示/隐藏或改用flex+ 响应式工具类
真正容易被忽略的是：这个技巧只对“正常流中的块级盒”起作用。一旦加了 float、position: absolute、或父容器是 inline-flex，行为就变了——不是失效，而是按另一套规则走，得重新判断上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
