企业官网建设流程全解析

floating-ui 使用指南：三步搞定浮动元素定位

【免费下载链接】floating-uiA JavaScript library to position floating elements and create interactions for them.项目地址: https://gitcode.com/GitHub_Trending/fl/floating-ui

floating-ui 是一个帮助你在网页里摆放"浮动元素"的轻量 JavaScript 库。所谓浮动元素，就是 tooltip、下拉菜单、弹层这类"贴在某个按钮旁边、又能自己躲开视口边缘"的小盒子。无论你是做前端的新手，还是想给现有项目加上规范的弹层交互，装上它都能少写一堆定位代码。

它到底帮你解决什么问题

一句话：你只想"让这个盒子出现在按钮旁边，并且别跑出屏幕"，剩下的数学题它替你算。

过去做弹层，你得手动算坐标、判断上下左右哪个方向放得下、还要处理滚动和缩放。floating-ui 把这三件事打包好，你只要声明"锚谁、放哪边"，它会持续追踪并自动避让。适合谁用？任何需要在网页、React、React Native 或 Vue 里做浮动 UI 的开发者。

三个能力，各管一摊

锚定定位，跟着目标走

这是核心能力。你把一个浮动元素绑定到一个参考元素（比如按钮）上，它会自动算出合适的 x、y 坐标。你省下的是：手写getBoundingClientRect加一堆 if-else 的判断逻辑。哪怕页面在滚动、容器在变形，它也持续跟着目标走。

自动避让，躲开屏幕边缘

浮动元素离视口太近时会被裁掉一半。floating-ui 通过 flip、shift 这类"中间件"（可以理解成一个个可叠加的修正小插件）自动翻转方向、平移位置，让它尽量完整可见。你省下的，是"弹层被切边"这种用户天天抱怨的 bug。

交互原语，拼出可访问组件

光会摆位置还不够，弹层还得能被点开、关掉、用键盘导航。React 包里给了一组 hooks 和组件，把"悬停打开、点击收起、焦点管理"这些交互拆成可组合的小块。你用它拼 tooltip、select、combobox，不用从零写无障碍逻辑。

三个真实场景，它怎么救场

你正在做一个商品卡片，鼠标悬停要弹出价格说明。遇到弹层贴着按钮、滚动页面就错位的问题。把说明框锚定到卡片、配上 autoUpdate（自动监听滚动和重排），它就一直稳稳跟着，不会飘走。

你正在做一个顶部下拉菜单，窄屏下弹层会超出右侧屏幕。加上 flip 和 shift 中间件，它会自己换到左边或下移，始终完整显示。你不用再针对不同分辨率写一堆媒体查询。

你正在给弹层做键盘可达性，让屏幕阅读器和 Tab 键也能用。用 React 包的 useFocus、useDismiss 原语组合起来，焦点进出、Esc 关闭这些细节都帮你处理好了。

三步接入

按你的技术栈装对应包，最快从"只会定位"的轻量包起步：

# Web 纯 JS npm install @floating-ui/dom # React 交互完整版 npm install @floating-ui/react

装完跑起来，用computePosition传入参考元素和浮动元素，拿到坐标写进style就完成定位。想看完整 API 和从 Popper 迁移的方法，官方文档整理得很细，入口在 website/pages/docs/。想深挖原理，定位和避让的核心逻辑都集中在 packages/core/src/middleware/ 里，每个文件就是一个中间件，读起来很直观。

适合谁

如果你受够了弹层乱飘、被切边、写一堆坐标计算，floating-ui 值得装一个。它模块拆分细、体积可控，用多少取多少。从教程到 API 的完整说明，都写在官方文档里，照着走基本不会卡壳。

【免费下载链接】floating-uiA JavaScript library to position floating elements and create interactions for them.项目地址: https://gitcode.com/GitHub_Trending/fl/floating-ui