该用 position: fixed。float 是为图文环绕设计的，无法稳定悬停；fixed 才能实现真正脱离文档流、始终相对于视口定位的悬浮菜单。
浮动操作菜单该用 position: fixed 还是 float？
直接说结论：别用 float 做“浮动操作菜单”。float 是为图文环绕、多列文本流设计的，强行用于固定位置的操作按钮会导致父容器塌陷、响应失效、z-index 失控。真正该用的是 position: fixed 配合 bottom/right 定位。
常见错误现象包括：菜单随页面滚动消失、点击区域错位、在移动端被虚拟键盘顶出视口、与其他 position: relative 元素层叠混乱。
-
position: fixed的元素脱离文档流，始终相对于视口定位，适合悬浮按钮 -
float仍属于文档流，受兄弟元素影响，无法稳定悬停在右下角 - 若误用
float后加clear: both或::after清除，只会让容器“以为”它还在流内，实际定位依然不可控
如何让浮动菜单在右下角稳定不遮挡内容？
关键不是“贴右下”，而是“避开关键区域”。硬写 bottom: 20px; right: 20px 在有底部导航栏（如 footer）或 iOS 安全区的设备上会重叠。
- 用
padding-bottom或margin-bottom给主内容区预留空间，值建议 ≥ 80px（适配 FAB 按钮高度 + 间距） - 对 iOS 设备，加
padding-bottom: env(safe-area-inset-bottom)防止被刘海/Home Indicator 切掉 - 避免设
z-index: 9999——用z-index: 100足够；过高易覆盖弹窗、Tooltip 等交互组件 - 若菜单含多个按钮，用
display: flex; flex-direction: column; gap: 8px替代浮动排列，更可控
点击展开的子菜单怎么避免布局抖动？
很多实现用 display: none/block 切换子菜单，结果展开瞬间页面重排，文字跳动、按钮位移。根本原因是 display 切换会触发回流（reflow）。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
- 改用
visibility: hidden+opacity: 0+transform: scale(0.95)组合隐藏，再配合transition动画 - 子菜单容器必须设固定
width和max-height，否则动画过程中高度从 0 变到 auto 仍会抖动 - 给父级按钮加
overflow: visible，否则transform缩放可能被裁剪 - JavaScript 触发时，优先用
classList.toggle()控制类名，而非直接操作style.display
移动端点击区域太小，怎么安全放大又不破坏布局？
CSS 中的 width/height 设为 40px 是视觉尺寸，但触控最小推荐尺寸是 48×48px。不能只靠 padding 填充，否则在高 DPR 屏幕上会模糊或溢出。
- 用
min-width: 48px; min-height: 48px保证可点击面积，内部图标用font-size或width: 24px控制视觉大小 - 对图标按钮，加
touch-action: manipulation提升点击响应速度 - 避免在
:active状态里仅改背景色——手指按下的反馈必须有缩放或阴影变化，否则用户不确定是否点中 - 如果菜单是
position: fixed且含input，iOS 上键盘弹出会把菜单顶出视口，此时需监听resize事件动态调整bottom值
最易被忽略的一点：所有浮动操作菜单必须有明确的焦点管理。键盘用户 Tab 进入后，焦点要自然落到主按钮；展开子菜单后，焦点应自动移到第一个可操作项，并支持 Esc 关闭。这比视觉动效更重要。
