| 类名 | 样式 |
|---|---|
| .float-start | float: inline-start; |
| .float-end | float: inline-end; |
| .float-none | float: none; |
概览
这些工具类可以根据当前视口大小将元素向左或向右漂浮，或禁用漂浮，使用 CSS float 属性。包含 !important 以避免特异性问题。它们使用与我们的网格系统相同的视口断点。请注意，浮动工具类对 flex 项目没有效果。
在所有视口尺寸上浮动开始
在所有视口尺寸上浮动结束
不要在所有视口尺寸上浮动
<div class="float-start">Float start on all viewport sizes</div><br>
<div class="float-end">Float end on all viewport sizes</div><br>
<div class="float-none">Don’t float on all viewport sizes</div>在父元素上使用 .d-flow-root 工具 来清除浮动。
响应式
每个float值也存在响应式变体。
在视口尺寸为 SM（小）或更大时右浮动
在中等（MD）或更大视口上浮动结束
在视口尺寸为 LG（大型）或更大时右浮动
在 XL（超大）或更大尺寸的视口上浮动结束
在尺寸为 2XL（超大）或更大的视口上浮动结束
<div class="sm:float-end">Float end on viewports sized SM (small) or wider</div><br>
<div class="md:float-end">Float end on viewports sized MD (medium) or wider</div><br>
<div class="lg:float-end">Float end on viewports sized LG (large) or wider</div><br>
<div class="xl:float-end">Float end on viewports sized XL (extra large) or wider</div><br>
<div class="2xl:float-end">Float end on viewports sized 2XL (extra extra large) or wider</div><br>以下是所有的支持类：
.float-start.float-end.float-none.sm:float-start.sm:float-end.sm:float-none.md:float-start.md:float-end.md:float-none.lg:float-start.lg:float-end.lg:float-none.xl:float-start.xl:float-end.xl:float-none.2xl:float-start.2xl:float-end.2xl:float-none
CSS
Sass 工具 API
浮点工具类在我们的工具类 API 中的 scss/_utilities.scss 声明。了解如何使用工具类 API。
"float": (
property: float,
responsive: true,
values: (
start: inline-start,
end: inline-end,
none: none,
)
),