Floats

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.

Floats: Left

Preview

No content has been added for this component.

No content has been added for this component.

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

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.


Overview of CSS Classes

Selector.slds-float_left
Summary

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

Restrict*
ModifierTrue
Selector.slds-float_none
Summary

Removes float from an element that has attribute already

Restrict*
ModifierTrue
Selector.slds-float_right
Summary

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

Restrict*
ModifierTrue