杂项

浏览器支持

¥Browser support

支持以下浏览器（由 browserslist 定义）：

¥The following browsers are supported (defined by browserslist):

• Chrome >= 73

• 火狐 >= 78

  ¥Firefox >= 78

• Edge >= 79

• Safari >= 12.0

• iOS >= 12.0

• 歌剧 >= 53

  ¥Opera >= 53

保持 Floating UI 最新

¥Keeping Floating UI up to date

Floating UI 使用内部第一方依赖（在 @floating-ui 组织下），这些依赖可能已过时，但包含你可能需要的错误修复。你也可以将 Floating UI 本身用作不同库的传递包。

¥Floating UI uses internal first-party dependencies (under the @floating-ui org) that may be out of date, but contain bug fixes you may need. You may also be using Floating UI itself as a transitive package of a different library.

只有某些包保持最新版本，以避免过于频繁地冲突依赖包并确保更广泛的版本支持。

¥Only certain packages are kept to the latest versions to avoid bumping dependant packages too frequently and to ensure wider version support.

要将 Floating UI 升级为传递包，请直接安装必要的包，这将更新你的锁定文件，然后再次卸载它们，使它们不在你的 package.json#dependencies 中。

¥To upgrade Floating UI as a transitive package, install the necessary packages directly, which will update your lockfile, then uninstall them again so they aren’t in your package.json#dependencies.

对于所有软件包，@floating-ui/core 都应手动更新：

¥For all packages, @floating-ui/core should be updated manually:

npm install @floating-ui/core@latest
npm uninstall @floating-ui/core

对于 @floating-ui/react、@floating-ui/react-dom 或 @floating-ui/vue，@floating-ui/dom 也应手动更新：

¥For @floating-ui/react, @floating-ui/react-dom, or @floating-ui/vue, @floating-ui/dom should also be updated manually:

npm install @floating-ui/dom@latest
npm uninstall @floating-ui/dom

如果你使用的是封装 Floating UI 的其他库，你也可以对其所依赖的相关软件包执行相同操作。

¥If you’re using a different library which wraps Floating UI, you can also do the same for the relevant package it is depending on.

亚像素和加速定位

¥Subpixel and accelerated positioning

你可以使用变换样式来定位浮动元素以提高性能，而不是整个文档中显示的 top 和 left。

¥Instead of top and left as shown throughout the docs, you can use transform styles instead to position the floating element for increased performance.

function roundByDPR(value) {
  const dpr = window.devicePixelRatio || 1;
  return Math.round(value * dpr) / dpr;
}
 
Object.assign(floatingEl.style, {
  top: '0',
  left: '0',
  transform: `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`,
});

x 和 y 可以包含小数（十进制），因此除非我们将其均匀地放置在设备的像素网格上，否则将会出现模糊。上面的舍入方法可确保浮动元素在屏幕上处于最佳位置。

¥x and y can contain fractional numbers (decimal), so there will be blurring unless we place it evenly on the device’s pixel grid. The rounding method above ensures the floating element is positioned optimally for the screen.

3D 变换

¥3D transforms

你还可以将浮动元素提升到其自己的层：

¥You can also promote the floating element to its own layer:

Object.assign(floatingEl.style, {
  top: '0',
  left: '0',
  transform: `translate3d(${roundByDPR(x)}px,${roundByDPR(y)}px,0)`,
});

如果你要对浮动元素的位置进行动画处理，则使用 transform 将提供更平滑的动画。

¥If you’re animating the location of the floating element, using transform will offer smoother animations.

z-index 堆叠

¥z-index stacking

Floating UI 对元素如何在 z 轴上堆叠没有意见。这意味着如果你的元素具有更高的 z-index，则它可能会被另一个定位元素遮挡。

¥Floating UI does not have opinions about how your elements stack on the z-axis. This means your element may be occluded beneath another positioned element if it has a higher z-index.

由于其复杂性，你需要自行处理应用中各种浮动元素的 z 索引。

¥Due to the complexity of this, it is up to you to handle the z indices of various floating elements in your application.

未来，Floating UI 可能会 使你能够指定要避免的元素，因此多个浮动元素可以智能地避免彼此冲突，而不必担心它们的 z-index。

¥In the future, Floating UI may enable you to specify elements to avoid, so multiple floating elements can avoid colliding with each other intelligently without worrying about their z-index.

剪裁

¥Clipping

如果你的浮动元素具有 position: relative 和 overflow: hidden CSS 样式，并且足够小以至于浮动元素无法正确定位在视图中，则它可能会被祖级剪裁。

¥Your floating element may get clipped by an ancestor if it has position: relative and overflow: hidden CSS styles, and small enough that the floating element cannot be positioned in view properly.

两种解决方案包括：

¥Two solutions include:

• 传送门：浮动元素可以附加到剪辑祖级之外的容器。

  ¥Portalling: The floating element can be appended to a container outside of the clipping ancestor.

• 使用固定策略：在大多数情况下，使用 'fixed' 策略会将浮动元素从其父剪切上下文中 “break” 出来。这允许你保持浮动元素的 DOM 上下文完好无损。但这并不能 100% 保证 - 传送门是唯一 100% 可靠的方法。

  ¥Use fixed strategy: Using the 'fixed' strategy will “break” the floating element out of its parent clipping context in the majority of cases. This allows you to keep the floating element’s DOM context in tact. This is not 100% guaranteed though — portalling is the only 100% reliable method.

处理大内容

¥Handling large content

当浮动元素的宽度超过视口的宽度时，可能会导致意外的行为。

¥When your floating element’s width exceeds the viewport’s, it can result in unexpected behavior.

你可以使用以下 CSS 限制浮动元素的宽度：

¥You can limit the width of the floating element using the following CSS:

.floating {
  max-width: calc(100vw - 10px);
}

这将始终使其比视口宽度小 10 个像素。

¥This will always make it 10 pixels less than the width of the viewport.

示例中显示的常量 10 应是提供给 shift() 中间件（如果正在使用）的 padding 的两倍。

¥The constant 10 shown in the example should be double the padding given to the shift() middleware if it’s in use.

或者，你可以根据是否发生轴溢出来尝试使用 size 中间件。

¥Alternatively, you may experiment with the size middleware depending on the axis overflow is occurring.

相对单位

¥Relative units

Floating UI 完全使用像素单位，因为它是一个 JavaScript 库，可使用 getBoundingClientRect() 和其他返回像素的测量属性。此外，它是跨平台的，像素是最常支持的单位。

¥Floating UI works entirely with pixel units as it is a JavaScript library that works with getBoundingClientRect() and other measurement properties that return pixels. Further, it is cross-platform, and pixels are the most commonly supported unit.

如果你的 CSS 使用相对单位（如 rem），建议你在将值传递到 Floating UI 之前将其转换为像素。

¥If your CSS uses relative units like rem, it is recommended you convert the values into pixels before passing them to Floating UI.

computePosition(reference, floating, {
  // 1rem => 16px
  middleware: [offset(remToPx(1))],
});