CMS Design System

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

Code snippet

<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

Code snippet

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

Code snippet