justify-content: flex-end 必须写在父容器上且父容器需设 display: flex；若父容器 display 被 float 或 position 覆盖、含空格文本节点、或按钮自身设了 float/position，则该属性失效。
flex布局中justify-content: flex-end为什么没生效
直接给按钮加justify-content: flex-end无效——这个属性必须写在**父容器**上，且父容器得先设display: flex。常见错误是只给按钮本身加样式，或者忘了声明display: flex，结果按钮还在文档流里老老实实左对齐。
如果父容器已有其他样式（比如display: block或float: left），display: flex会被覆盖，浏览器控制台的 computed styles 里能看到最终生效的 display 值。
- 确认父容器是否真的启用了 Flex：检查 computed styles 中
display是否为flex或inline-flex - 避免在父容器上同时用
float或position: absolute，它们会干扰 flex 行为 - 若父容器内有空格文本节点（比如换行缩进），它会被当成一个子元素，导致
justify-content: space-between等行为异常；可用font-size: 0或注释掉换行来规避
margin-left: auto 和 float: right 的关键区别
margin-left: auto 是 flex 项专属行为，它把按钮“推”到剩余空间最右边，不脱离文档流，不影响父容器高度；float: right 则让按钮脱离文档流，容易引发父容器塌陷、后续元素上移等问题。
用 float: right 必须配套清除浮动，否则布局会错乱；而 margin-left: auto 只要父容器是 display: flex 就能直接生效，无需额外清理。
-
margin-left: auto只作用于单个 flex 子项，适合输入框+按钮这种并排结构 -
float: right在 IE10+ 兼容性好，但响应式场景下容易因宽度变化导致按钮换行或错位 - 如果按钮同时设置了
position: absolute或float，margin-left: auto会失效
text-align: right 对 button 失效的典型原因
text-align: right 只影响内联级内容的对齐，比如文字、span、未被设为 block 的 button。但一旦按钮被包裹在块级容器（如 div）里，且该容器宽度占满父级，text-align 就只控制容器内部的“文本流”，不会移动按钮本身的位置。
更隐蔽的问题是：某些 CSS 重置库（如 normalize.css）会把 button 设为 display: block，此时 text-align 完全无效。
- 检查按钮的 computed
display值，如果是block，text-align不起作用 - 不要依赖默认 inline-block 行为，显式写
display: inline-block再配text-align: right才可靠 - 当父容器里还有其他块级元素时，
text-align更不可控，建议直接切 flex
position: absolute + right: 0 按钮飘走怎么办
position: absolute 的定位基准是**最近的已定位祖先元素**。如果漏写父容器的 position: relative，right: 0 就会相对于整个 viewport 计算，按钮可能出现在屏幕右下角、被滚动条切掉，甚至跑到页面外。
调试时打开浏览器开发者工具，看按钮的 computed position 和 offsetParent，就能确认它到底相对谁在定位。
- 父容器必须显式设置
position: relative（或absolute/fixed），不能靠继承 - 若按钮需随父容器滚动（比如在卡片或 modal 里），禁用
position: fixed，它会让按钮脱离上下文钉死在视口 -
top: 50%+transform: translateY(-50%)垂直居中时，父容器要有明确高度，否则top: 50%计算无依据
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
