按钮用float: right导致父容器塌陷，需清除浮动：推荐伪元素法（.parent::after{content:"";display:table;clear:both}），或overflow:hidden（简单但可能裁剪溢出内容），或插入clear:both空div（兼容性好但冗余）。
button用float: right后内容塌陷怎么办
直接加float: right会让按钮脱离文档流，父容器高度可能变成0，后续元素往上爬——这是最常踩的坑。
必须同步处理浮动清除：
- 给父容器加
overflow: hidden（简单有效，但会裁剪溢出内容） - 在父容器末尾插入
<div style="clear: both"></div>（兼容性好，HTML略冗余） - 用伪元素清除：
.parent::after { content: ""; display: table; clear: both; }（推荐，干净无侵入）
注意：float只对display为block或inline-block的按钮生效；如果按钮被设成display: flex或grid，float会被忽略。
用position: absolute右对齐按钮时为什么没效果
绝对定位的前提是：父容器必须有position: relative（或absolute/fixed），否则right: 0会相对于<body>定位，而不是你期望的“按钮所在栏”。
立即学习“前端免费学习笔记（深入）”；
典型错误写法：<div><button style="position: absolute; right: 0">提交</button></div>
正确写法：
- 外层
<div style="position: relative"> - 按钮加
position: absolute; right: 0; top: 50%; transform: translateY(-50%);（垂直居中） - 若按钮高度不固定，避免硬写
top值，优先用inset或flex替代
绝对定位适合固定尺寸、位置强约束的场景（比如输入框右侧下拉箭头），不适合响应式多变布局。
为什么text-align: right有时按钮不靠右
这个属性只对行内级内容起作用。按钮默认是inline-block，所以多数情况下能对齐；但一旦被其他样式覆盖，就失效了。
常见干扰项：
-
button { display: block; }→ 按钮变块级，text-align对其无效 -
button { width: 100%; }→ 占满整行，自然“靠右”只是错觉 - 父容器用了
flex或grid，text-align被忽略
验证方法：浏览器开发者工具里检查按钮的computed display值，确认是不是inline或inline-block。
margin-left: auto在Flex容器里为啥比justify-content: flex-end更灵活
两者都依赖父容器display: flex，但行为逻辑不同：
-
justify-content: flex-end：整个子元素组右对齐，所有按钮一起贴右边界 -
margin-left: auto：只推当前按钮，左边元素照常左对齐，右边留空——适合导航栏里把“退出”按钮单独顶到最右，而“首页”“设置”仍靠左
注意：margin-left: auto对多个按钮同时设置，只有第一个生效；想让多个按钮右对齐，还是用justify-content或包一层div再设margin-left: auto。
别忘了加flex-wrap: nowrap（默认值），否则小屏下按钮可能换行，auto margin 就失去意义。
