Float

Overview

Float utilities set the CSS float property — start, end, or none — based on the viewport size. !important is applied to prevent specificity conflicts. These utilities follow the same breakpoint scale as the grid. Note: float has no effect inside flex containers.

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

Use the clearfix utility on a parent element to clear floats.

Responsive

Responsive variants are available for all float values:

<div class="small:float-end">Float end on viewports sized "<b>small</b>" or wider</div><br>
<div class="medium:float-end">Float end on viewports sized "<b>medium</b>" or wider</div><br>
<div class="large:float-end">Float end on viewports sized "<b>large</b>" or wider</div><br>
<div class="xlarge:float-end">Float end on viewports sized "<b>xlarge</b>" or wider</div><br>
<div class="2xlarge:float-end">Float end on viewports sized "<b>2xlarge</b>" or wider</div><br>

Here are all the support classes:

• .float-start
• .float-end
• .float-none
• .small:float-start
• .small:float-end
• .small:float-none
• .medium:float-start
• .medium:float-end
• .medium:float-none
• .large:float-start
• .large:float-end
• .large:float-none
• .xlarge:float-start
• .xlarge:float-end
• .xlarge:float-none
• .2xlarge:float-start
• .2xlarge:float-end
• .2xlarge:float-none

CSS

Float utilities are generated via the utilities API.

Reference

The table lists all float utilities and their CSS properties.

Utilities API

Float utilities are declared in scss/utilities/_index.scss using the utilities API.

"float": (
  responsive: true,
  property: float,
  values: (
    start: inline-start,
    end: inline-end,
    none: none,
  )
),