用display: flex+justify-content: space-between实现底部悬浮条左右按钮对齐最稳，需设position: fixed、bottom: 0、left: 0、right: 0并为body加padding-bottom防遮挡，禁用absolute和float，注意ios键盘弹出导致的错位。
用 display: flex + justify-content: space-between 实现左右对齐
固定底部悬浮条本身是 position: fixed 容器，它默认不是定位上下文，所以不能靠 position: absolute + left: 0/right: 0 把按钮“钉”在两边——那样按钮会脱离容器、飘到整个视口边缘，小屏下还容易重叠或溢出。
正确做法是让容器自己变成 Flex 布局：
- 给悬浮条容器加
display: flex和justify-content: space-between - 确保容器已设
position: fixed、bottom: 0、left: 0、right: 0 - 两个按钮作为直接子元素，不包额外 wrapper，也不设
width: 100% - 按钮文字过长时加
white-space: nowrap+overflow: hidden+text-overflow: ellipsis防换行溢出
为什么 float 在 fixed 容器里失效
float 的行为依赖文档流和父容器的 BFC（块级格式化上下文），但 position: fixed 容器本身不触发 BFC，且脱离文档流，导致 float: left 和 float: right 失去锚点，按钮可能堆叠、错位甚至消失。
更麻烦的是，浮动元素不会撑开父容器高度，而你根本不需要“撑高”——底部悬浮条高度是固定的。强行用 overflow: hidden 清浮动反而可能截断阴影或下拉菜单。
所以别碰 float，尤其在 fixed 场景下。
必须为 body 加 padding-bottom 预留空间
固定悬浮条会盖住页面底部内容，这不是 bug 是特性。唯一可靠解法是给 body 加 padding-bottom，值必须严格等于悬浮条的可见高度（含 border 和 padding，取决于是否设了 box-sizing: border-box）。
常见疏漏：
- 用
margin-bottom代替padding-bottom—— margin 不推内容，只影响自身外边距 - 估算高度（比如写
56px却没测实际渲染值），差 1px 就可能截断最后一行文字 - 在 Safari 上用
100vh或百分比设悬浮条高度，地址栏收放时会跳变
iOS 键盘弹出会把悬浮条顶上去，怎么稳住
iOS Safari 在软键盘弹出时会收缩视口高度，但 position: fixed 元素有时会跟着“上浮”，尤其当输入框在底部附近时。
缓解方案有限但有效：
- 悬浮条高度用固定值（如
56px），别依赖vh或动态计算 - 输入框获得焦点时，用 JS 检测
window.visualViewport?.height变化，临时给悬浮条加transform: translateY(...)微调（需配合will-change: transform避免闪屏） - 更稳妥的做法：键盘弹出时隐藏悬浮条（监听
focusinoninput/textarea），失焦再恢复
这个细节常被忽略，但用户一输文字就发现按钮不见了，体验直接掉档。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
