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.

About Floats#

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.

Examples#

I’m floooaaaating

<div class="slds-clearfix">
  <div class="slds-float_left">
    <p>I’m floooaaaating</p>
  </div>

I’m floooaaaating

<div class="slds-clearfix">
  <div class="slds-float_right">
    <p>I’m floooaaaating</p>
  </div>

I’m not floooaaaating

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

I’m floooaaaating

<div class="slds-clearfix">
  <div class="slds-float_left">
    <p>I’m floooaaaating</p>
  </div>

Selector: The CSS class being referred to.
Summary: A description of what the class does.
Support: Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
Restrict: The selector that the class name is allowed to be used on.
Variant: The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
Modifier: A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.

Selector	`.slds-float_left`
Summary	Pulls element from document flow and floats left. Text and other elements wrap around it.
Restrict	`*`
Modifier	True

Selector	`.slds-float_none`
Summary	Removes float from an element that has attribute already
Restrict	`*`
Modifier	True

Selector	`.slds-float_right`
Summary	Pulls element from document flow and floats right. Text and other elements wrap around it.
Restrict	`*`
Modifier	True