Components › Utilities

Floats

Use a float to pull an element out of the document’s normal flow and to align it with the left or right side of the container.

Float LeftFloat Leftdev ready

Preview

Code

<section class="slds-clearfix">
  <div class="slds-float--left">
    <p>I’m floooaaaating</p>
  </div>
</section>

Float RightFloat Rightdev ready

Preview

Code

<section class="slds-clearfix">
  <div class="slds-float--right">
    <p>I’m floooaaaating</p>
  </div>
</section>

Float NoneFloat Nonedev ready

Preview

Code

<div class="slds-float--none">
  <p>I’m not floooaaaating</p>
</div>

ClearfixClearfixdev ready

Preview

Code

<section class="slds-clearfix">
  <div class="slds-float--left">
    <p>I’m floooaaaating</p>
  </div>
  <div class="slds-float--right">
    <p>I’m floooaaaating</p>
  </div>
</section>

Component Overview

To float an element on the left, add the .slds-float--left class to the element. To float it on the right, add the .slds-float--right class.

Note: The floated element must be first in the document flow, even if it renders on the right.

If you want the parent of the floated element to contain the floats, add the .slds-clearfix class to the parent.

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-float--left
Applied to:

Outcome:

Pulls element from document flow and floats left. Text and other elements wrap around it.

Required:

No, optional element or modifier

Comments:

--

.slds-float--right
Applied to:

Outcome:

Pulls element from document flow and floats right. Text and other elements wrap around it.

Required:

No, optional element or modifier

Comments:

--

.slds-clearfix
Applied to:

Outcome:

Contains floats and stops wrapping of elements following it.

Required:

No, optional element or modifier

Comments:

Applies to parent of floats