浮动（Float）

使用我们的响应式浮动工具，在任何断点上切换任何元素上的浮动。

On this page

概述

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

Float start on all viewport sizes

Float end on all viewport sizes

Don't float on all viewport sizes

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 值也有响应变化。

Float end on viewports sized SM (small) or wider

Float end on viewports sized MD (medium) or wider

Float end on viewports sized LG (large) or wider

Float end on viewports sized XL (extra large) or wider

Float end on viewports sized XXL (extra extra large) or wider

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

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

scss/_utilities.scss

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