Float

Float utilities position an element to the left or right of its container, allowing inline content to wrap around it.

Float classes

Use float-start to float left, float-end to float right, and float-none to clear float.

<div class="border rounded-sm p-2 mb-3">
  <div class="float-start bg-surface-raised rounded-sm p-2 me-2 mb-1">float-start</div>
  <p>This text wraps around the floated element on the left side. The float-start utility positions the element to the inline start edge.</p>
</div>

<div class="border rounded-sm p-2 mb-3">
  <div class="float-end bg-surface-raised rounded-sm p-2 ms-2 mb-1">float-end</div>
  <p>This text wraps around the floated element on the right side. The float-end utility positions the element to the inline end edge.</p>
</div>

<div class="border rounded-sm p-2">
  <div class="float-none bg-surface-raised rounded-sm p-2 mb-1">float-none</div>
  <p>This element is not floated. The float-none utility clears any inherited float.</p>
</div>

float-start

This text wraps around the floated element on the left side. The float-start utility positions the element to the inline start edge.

float-end

This text wraps around the floated element on the right side. The float-end utility positions the element to the inline end edge.

float-none

This element is not floated. The float-none utility clears any inherited float.

Responsive

Add breakpoint suffixes for responsive behavior: .float-start@sm, .float-end@md, .float-none@lg, .float-*@xl, .float-*@2xl.

<div class="border rounded-sm p-2">
  <div class="float-none float-end@md bg-surface-raised rounded-sm p-2 ms-2 mb-1">Floats right from md up</div>
  <p>On small screens this element sits in normal flow. From the md breakpoint upward it floats to the end edge.</p>
</div>

Floats right from md up

On small screens this element sits in normal flow. From the md breakpoint upward it floats to the end edge.

Reference

Class	Property	Responsive
`.float-start`	`float: left`	Yes
`.float-end`	`float: right`	Yes
`.float-none`	`float: none`	Yes