# 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]`

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

## Clearfix

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

**Format**: `.ds-u-clearfix`

<EmbeddedExample>
  <section style={{ height: 175 }}>
    <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: 50 }}
      >
        {'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: 50 }}
      >
        {'Floated right'}
      </div>
    </div>
  </section>
</EmbeddedExample>

## Responsive float

Use a [breakpoint prefix](/foundation/layout-grid/responsive-design/) to change how an element is floated at specific breakpoints.