浮动

使用我们的响应式浮动实用程序，在任何元素上切换浮动，跨越任何断点。

此页面上

概述

这些实用程序类使用 CSS float 属性，根据当前视口大小将元素浮动到左侧或右侧，或禁用浮动。包含 !important 以避免特异性问题。它们使用与我们的网格系统相同的视口断点。请注意，浮动实用程序对 flex 项目没有影响。

在所有视口大小上浮动开始

在所有视口大小上浮动结束

在所有视口大小上不浮动

html

<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>

在父元素上使用 clearfix 帮助程序来清除浮动。

响应式

每个 float 值也存在响应式变体。

在大小为 SM（小）或更大的视口上浮动结束

在大小为 MD（中）或更大的视口上浮动结束

在大小为 LG（大）或更大的视口上浮动结束

在大小为 XL（超大）或更大的视口上浮动结束

在大小为 XXL（超超大）或更大的视口上浮动结束

html

<div class="float-sm-end">Float end on viewports sized SM (small) or wider</div><br>
<div class="float-md-end">Float end on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-end">Float end on viewports sized LG (large) or wider</div><br>
<div class="float-xl-end">Float end on viewports sized XL (extra large) or wider</div><br>
<div class="float-xxl-end">Float end on viewports sized XXL (extra extra large) or wider</div><br>

以下是所有支持类

.float-start
.float-end
.float-none
.float-sm-start
.float-sm-end
.float-sm-none
.float-md-start
.float-md-end
.float-md-none
.float-lg-start
.float-lg-end
.float-lg-none
.float-xl-start
.float-xl-end
.float-xl-none
.float-xxl-start
.float-xxl-end
.float-xxl-none

CSS

Sass 实用程序 API

浮动实用程序在 scss/_utilities.scss 中的实用程序 API 中声明。了解如何使用实用程序 API。

scss/_utilities.scss

"float": (
  responsive: true,
  property: float,
  values: (
    start: left,
    end: right,
    none: none,
  )
),