右浮动按钮窄屏下溢出的根本原因是浮动元素仍参与行框计算且未触发BFC；推荐用flex（宽屏justify-content: flex-end，窄屏flex-direction: column+align-items: flex-end）或grid（grid-template-areas配合媒体查询）实现可靠响应式布局。
右浮动按钮在窄屏下不换行，卡在右侧溢出
纯 float: right 在容器变窄时不会自动“沉底”，而是继续挤在行内，导致按钮被裁切或撑破布局。根本原因是浮动元素仍参与行框计算，且没有触发 BFC 边界来约束换行逻辑。
- 用
float: right前，确保父容器有明确宽度或 max-width，否则窄屏下浏览器可能按视口宽渲染，掩盖问题 - 给按钮加
white-space: nowrap会加剧溢出——这是常见误操作，以为能防文字折行，实则锁死了整个按钮的换行机会 - 若父容器是
display: flex，float会被忽略，此时必须改用margin-left: auto或justify-content: flex-end
用 flex 实现“窄屏自动下沉”的可靠写法
Flex 是目前最可控的方式：把按钮放到底部不是靠“掉下来”，而是靠在不同断点下切换主轴方向和对齐方式。
- 默认（宽屏）：父容器设
display: flex+justify-content: flex-end，按钮贴右 - 窄屏（如
@media (max-width: 768px)）：改为flex-direction: column+align-items: flex-end，按钮自然堆到底部右对齐 - 避免用
margin-top: auto推按钮到底——它依赖容器高度，而表单容器常是内容高度，无效
form {
display: flex;
justify-content: flex-end;
}
@media (max-width: 768px) {
form {
flex-direction: column;
align-items: flex-end;
}
}
用 grid 替代 float 的极简方案
Grid 更适合“按钮永远在右下角”这类强定位需求，代码少、行为确定，且天然响应式。
- 父容器设
display: grid+grid-template-areas: "content button"，再用@media改为"content" "button" - 按钮本身加
grid-area: button，无需额外定位 - 注意：IE11 不支持
grid-template-areas，若需兼容，应回退到 flex 方案 - 别用
position: absolute模拟——它脱离文档流，窄屏下容易和表单其他元素重叠
为什么不用 clear: both 或 overflow: hidden 强制换行
这些是旧式浮动清理手段，对“按钮沉底”目标无效，反而引入新问题。
立即学习“前端免费学习笔记（深入）”；
-
clear: both只能让后续元素换行，不能让按钮自己换行；加在按钮上等于告诉它“前面不能有浮动”，和目标无关 -
overflow: hidden触发 BFC 后，浮动按钮确实可能被“挤”下去，但行为不可控：取决于兄弟元素顺序、高度、是否塌陷，调试成本高 - 现代项目里，为一个按钮专门开 BFC 还要处理 margin 折叠，属于用重型工具拧螺丝
margin-top，且在每个断点里单独调。 
