float: right 失效的根本原因是浮动元素脱离文档流，导致父容器高度塌陷、后续元素上移；必须配合清除浮动（如 display: flow-root）或改用 flex/grid 布局。
float: right 为什么经常失效？
直接给 button 加 float: right 看似简单，但实际常导致父容器高度塌陷、后续元素上移、响应式错位等问题。根本原因是浮动元素脱离文档流，而父容器若没有触发 BFC（比如没设 overflow: hidden 或 display: flow-root），就“看不见”子元素高度。
- 必须配合清除浮动：在父容器末尾加
，或更推荐给父容器加display: flow-root - 按钮若被设为
display: block或有width: 100%，float仍生效，但可能挤占整行，失去“靠右+旁边留白”的预期效果 - 在 Flex 或 Grid 容器里，
float被忽略——这点容易被忽略，调试时发现样式不生效，先检查父容器 display 类型
position: absolute 怎么避免飘出视口？
用 position: absolute + right: 0 确实能“钉”在右边，但前提是父容器必须是 position: relative（或 absolute/fixed）。否则，right: 0 会相对于整个 viewport 定位，按钮可能出现在页面任意角落，甚至被滚动条切掉。
- 父容器漏写
position: relative是最常见错误，浏览器控制台里看 computed position 就能确认 - 如果按钮需要随父容器滚动（比如在卡片内），不能用
position: fixed，否则它会固定在屏幕右下角，脱离上下文 - 搭配
top: 50%+transform: translateY(-50%)垂直居中时，注意父容器要有明确高度，否则top: 50%计算基准不可靠
flexbox 中 justify-content: flex-end 和 margin-left: auto 的区别
两者都能让按钮靠右，但行为逻辑完全不同：justify-content: flex-end 是对齐整个 flex 容器的主轴；margin-left: auto 是把按钮当做一个独立 flex 项，用外边距把它“推”到最右。后者更灵活，尤其适合混合布局。
- 如果父容器只有按钮一个子元素，两者效果一样；但如果有多个按钮，
justify-content: flex-end会让所有按钮一起靠右，margin-left: auto只推最后一个 - 想让按钮和左边文字并排、右边留空？用
margin-left: auto；想让一排按钮整体右对齐？用justify-content: flex-end - 注意：
margin-left: auto在 IE11 中支持，但需确保父容器是display: flex，且按钮没被设为float或position: absolute
text-align: right 对 button 失效的典型场景
text-align: right 只对内联级元素有效。虽然 button 默认是 display: inline-block，看似能被影响，但很多重置 CSS（如 normalize.css）或框架（如 Bootstrap）会把它改成 display: block，这时该方法就彻底失效。
- 检查 computed 样式里的
display值，不是inline或inline-block就别指望text-align - 即使生效，按钮宽度若设为
100%，也会撑满父容器，看起来仍是左对齐——因为“右对齐”是针对内容，不是针对块本身 - 这个方法适合快速原型或 CMS 输出的不可控 HTML，但不适合需要稳定控制的生产环境
复杂点在于：没有“银弹”方案。按钮是否单独存在、是否要响应式、是否嵌套在表单或卡片里、是否要兼容老 IE——这些都会决定该选哪条路。最容易被忽略的是父容器的 display 类型和定位上下文，而不是按钮自身的样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
