浮动

概述

¥Overview

这些工具类根据当前视口大小，使用 CSS float 属性 函数将元素向左或向右浮动，或禁用浮动。包含 !important 是为了避免特异性问题。它们使用与我们的网格系统相同的视口断点。请注意浮动工具对弹性项目没有影响。

¥These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the CSS float property. !important is included to avoid specificity issues. These use the same viewport breakpoints as our grid system. Please be aware float utilities have no effect on flex items.

<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 helper 来清除浮动。

¥Use the clearfix helper on a parent element to clear floats.

响应式

¥Responsive

每个 float 值也存在响应变化。

¥Responsive variations also exist for each float value.

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

以下是所有支持类：

¥Here are all the support classes:

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

¥Sass utilities API

浮动工具在 scss/_utilities.scss 中的工具 API 中声明。Learn how to use the utilities API.

¥Float utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

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