position: fixed 元素不参与文档流，max-width 需配合 left/right 或 width 才生效；推荐 left: 0; right: 0; max-width: 1200px; margin: 0 auto; 实现居中限宽，兼容性好且无需 JS。
position: fixed 元素本身不参与文档流，max-width 无法像普通块级元素那样靠 margin: 0 auto 居中生效——直接套用常规居中逻辑会失败。
为什么底部固定条加了 max-width 却还是撑满全屏
因为 position: fixed 元素的宽度默认是 auto，而 auto 在 fixed 定位下会“尽可能撑开”，尤其当没设 left/right 时，浏览器可能按视口宽度计算。更关键的是：max-width 只限制上限，不定义起始宽度；没配 width 或 left+right，它就无从约束。
- 错误写法：
bottom: 0; max-width: 1200px;→ 实际宽度仍是 100vw - 正确思路：用
left和right“夹出”一个可被max-width介入的宽度上下文 - 必须显式设
width: fit-content或width: auto，否则max-width不触发
left/right + max-width 的安全组合写法
这是目前最稳定、兼容性最好（IE11+）、无需 JS 的方案。核心是让 fixed 元素的宽度由 left 和 right 推导，再用 max-width 限制其上限。
-
position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); max-width: 1200px; width: fit-content;→ 居中且限宽，但fit-content在 Safari 旧版有兼容问题 - 更稳妥写法：
position: fixed; bottom: 0; left: 0; right: 0; max-width: 1200px; margin: 0 auto;→ 利用left: 0; right: 0让浏览器先算出“可用宽度”，margin: 0 auto才能生效（注意：仅当元素未脱离文档流时才有效，但 fixed 下此写法在现代浏览器中已被广泛支持） - 终极兼容写法（推荐）：
position: fixed; bottom: 0; left: 50%; width: 1200px; transform: translateX(-50%);→ 绕过max-width，直接用固定宽 + 水平偏移，简单粗暴不踩坑
移动端适配和点击热区陷阱
底部悬浮条在手机上极易误触系统手势栏或遮挡底部导航，max-width 不是唯一要管的，热区尺寸和定位偏移同样关键。
立即学习“前端免费学习笔记（深入）”；
- 别用
bottom: 0贴底，iOS Safari 会和底部地址栏冲突；统一用bottom: 24px（横屏/小屏可加大到80px） - 按钮本身至少
height: 56px，确保 WCAG 触摸目标达标；图标用flex居中，别靠font-size控制大小 - 如果内容是文字+按钮组合，外层容器需设
padding: 12px 24px，避免文字紧贴边缘导致视觉溢出 - 用
box-shadow或细边框（border: 1px solid rgba(0,0,0,0.1)），纯色块在深色背景或滚动内容上容易“消失”
真正难的不是宽度，而是状态与层级
很多人调完 max-width 就以为完了，结果上线后发现：快速连点生成多个实例、返回页面时按钮残留、弹窗出来被盖住……这些都不是样式问题。
-
z-index别堆到999999，z-index: 999足够，过高会和第三方 SDK（如客服浮窗、埋点提示）冲突 - 销毁时用
remove()，别只display: none；否则事件监听器还在内存里挂着 - 如果支持拖拽，
mousemove监听器必须在mouseup后removeEventListener，否则每次打开都叠加一次监听 - 页面高度不足一屏时，fixed 元素可能“悬空不见”：给
body加min-height: 100vh是必要兜底
