Float

Set an element's float property using the float utility.

You can use the clearfix utility class to automatically clear your floats.

Format: .ds-u-float--[left|right|none]

Responsive format: .ds-u-[breakpoint]-float--[left|right|none]

.ds-u-float--left

.ds-u-float--right

.ds-u-float--none

<section class="example--wrapper">
  <div
    class="ds-u-clearfix ds-u-padding--1 ds-u-border--1 ds-u-margin-bottom--2"
  >
    <p class="ds-u-float--left utility-example ds-u-padding--1">
      <code>.ds-u-float--left</code>
    </p>
  </div>
  <div
    class="ds-u-clearfix ds-u-padding--1 ds-u-border--1 ds-u-margin-bottom--2"
  >
    <p class="ds-u-float--right utility-example ds-u-padding--1">
      <code>.ds-u-float--right</code>
    </p>
  </div>
  <div
    class="ds-u-clearfix ds-u-padding--1 ds-u-border--1 ds-u-margin-bottom--2"
  >
    <p class="ds-u-float--none utility-example ds-u-padding--1">
      <code>.ds-u-float--none</code>
    </p>
  </div>
</section>

Clearfix

The clearfix utility can be applied to an element to clear floats around the element.

Format: .ds-u-clearfix

.ds-u-clearfix

Floated right

No clearfix

Floated right

<section style="height: 175px">
  <div class="ds-u-clearfix utility-example ds-u-padding--1">
    <code>.ds-u-clearfix</code>
    <div
      class="ds-u-float--right ds-u-fill--white ds-u-padding--1 ds-u-border--1"
      style="height: 50px"
    >
      Floated right
    </div>
  </div>
  <div class="utility-example ds-u-padding--1">
    <span>No clearfix</span>
    <div
      class="ds-u-float--right ds-u-fill--white ds-u-padding--1 ds-u-border--1"
      style="height: 50px"
    >
      Floated right
    </div>
  </div>
</section>

Responsive float

Use a breakpoint prefix to change how an element is floated at specific breakpoints.

CMS Design System

Have ideas?

Clearfix

Responsive float

On this page

Have ideas?

On this pageOpen

Have ideas?

Clearfix

Responsive float

On this page

Have ideas?