最可靠方案是display: flex + justify-content: space-between，兼容性好、行为确定；CSS Grid在老版Safari中存在gap不生效、fr解析异常等问题，需降级处理。
底部悬浮条用 flex 实现两端对齐最可靠
直接用 display: flex + justify-content: space-between 是目前兼容性好、行为确定的方案。CSS Grid 虽然也能做，但在老版本 Safari（position: fixed 容器支持不稳定，容易错位或塌陷。
关键点是：容器必须是 fixed 定位，且内部子元素不能依赖 float 或 inline-block 布局——它们在 fixed 容器里容易脱离文档流预期。
- 给底部条设
position: fixed; bottom: 0; left: 0; width: 100%; - 子元素用
display: flex，不要用text-align: justify（对 inline 元素生效，但对块级按钮/链接无效） - 避免给子项设
margin-left: auto或margin-right: auto混用，会和space-between冲突
为什么 text-align: justify 在底部条里大概率失效
很多人试过给父容器设 text-align: justify，再给子项加 display: inline-block，但结果常是右边内容紧贴左端，或最后一行没撑开。这是因为 justify 只对「一行内有多于一个可换行的 inline 盒子」起作用，而底部条通常只有 2–3 个固定宽按钮，浏览器认为“无需拉伸”，就放弃对齐。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 必须配合
::after { content: ""; display: inline-block; width: 100%; }才可能触发，但这个 hack 在fixed容器中易被忽略或高度异常 - 移动端 Safari 对
justify的 inline-block 处理更保守，经常直接退化为左对齐 - 无法响应子项宽度变化（比如文字长度不同导致按钮变宽），flex 则自动重排
position: fixed 下的 padding/margin 坑要手动避让
底部悬浮条盖住页面内容是常见问题，尤其当页面有 padding-bottom 或 margin-bottom 时，不能指望它自动“推高”内容。浏览器不会因为 fixed 元素存在就调整文档流高度。
立即学习“前端免费学习笔记（深入）”；
- 如果页脚需要留空，必须显式给
<body>或主内容区加padding-bottom: 60px（值 = 底部条高度） - 别用
margin-bottom，它在 fixed 元素下不产生占位效果 - 若底部条高度动态（比如多行文字），用 JS 监听 resize 并更新 padding 更稳妥，纯 CSS 无解
移动端点击区域小？别只改 font-size
底部悬浮条常含按钮或链接，但很多实现只调大文字，导致实际可点击区域仍只有文字高，iOS 上容易误触失败。
- 给每个可点元素设
min-height: 44px（iOS 推荐最小触控尺寸）和padding: 12px 16px - 避免用
line-height撑高——它不扩大点击热区，只是视觉居中 - 确保
touch-action: manipulation存在，减少 iOS 300ms 延迟带来的点击反馈滞后感
