自適應寬度
在一些情況下，我們需要讓浮動元素和上方的參考元素有同等的寬度，可以選擇使用 CSS 或 JS 的方式來實現。
使用 CSS 實現自適應寬度
要使用 CSS 來實現自適應寬度，我們可以增加以下設定：
先將 <Float> 元件增加 as="div" 和 class="relative"，將外圍渲染成 <div class="relative"> 後，再增加 floating-as="template" 讓浮動元素外圍不渲染任何元素 (因為預設會渲染一層 <div> 元素)，直接對浮動元素進行定位，最後為參考元素和浮動元素加上 w-full class 就大功告成了。
現在按鈕和選單就會有同等的寬度了：
html
<Listbox>
<Float
as="div"
class="relative"
placement="bottom"
:offset="4"
floating-as="template"
>
<ListboxButton class="w-full ...">
...
</ListboxButton>
<ListboxOptions class="w-full ...">
...
</ListboxOptions>
</Float>
</Listbox>
當然也可以直接指定寬度：
html
<Listbox>
<Float
...
class="relative w-[260px]"
...
>
...
</Float>
</Listbox>
如果放在 flex 容器中要撐滿寬度的話，需要加上 w-full class：
html
<div class="flex justify-center items-center">
<Listbox>
<Float
...
class="relative w-full"
...
>
...
</Float>
</Listbox>
</div>
使用 JS 實現自適應寬度 v0.10+
有些情況下 CSS relative 無法正常同步浮動元素的寬度，比如像同時使用到 portal 的時候。此時可以使用 adaptive-width prop，背後使用了 ResizeObserver API 來監測參考元素的寬度並同步到浮動元素上，但相對的是效能會比 CSS 實現還要差。
html
<Float adaptive-width>