Float浮动

Overview概述

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. 这些实用程序类使用CSS float属性根据当前视口大小将元素向左或向右浮动，或禁用浮动。!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>

Responsive反应敏捷的

Responsive variations also exist for each float value.每个float值也存在响应变化。

<div class="float-sm-start">Float start on viewports sized SM (small) or wider</div><br>
<div class="float-md-start">Float start on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-start">Float start on viewports sized LG (large) or wider</div><br>
<div class="float-xl-start">Float start on viewports sized XL (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

Sass

Utilities API实用程序API

Float utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.浮动实用程序在实用程序API中以scss/_utilities.scss的形式声明。了解如何使用实用程序API。

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