浮動（Float）

使用我們的響應式浮動工具程式，在任何中斷點上切換任何元素的浮動。

本頁內容

概覽（Overview）

這些通用類別根據目前的可視區域大小，使用 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 輔助類別來清除浮動。

響應式（Responsive）

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

浮動通用類別在 scss/_utilities.scss 中的 utilities API 中宣告。了解如何使用 utilities API。

scss/_utilities.scss

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