float

Utilities for controlling the wrapping of content around an element.

2025-04-05

Written by: tdtc

ClassStyles
float-rightfloat: right;
float-leftfloat: left;
float-startfloat: inline-start;
float-endfloat: inline-end;
float-nonefloat: none;

Floating elements to the right

Use the float-right utility to float an element to the right of its container:

<article>
  <img class="float-right ..." src="/img/mountains.jpg" />
  <p>Maybe we can live without libraries, people like you and me. ...</p>
</article>

Floating elements to the left

Use the float-left utility to float an element to the left of its container:

<article>
  <img class="float-left ..." src="/img/mountains.jpg" />
  <p>Maybe we can live without libraries, people like you and me. ...</p>
</article>

Using logical properties

Use the float-start and float-end utilities, which use logical properties to map to either the left or right side based on the text direction:

<article>
  <img class="float-start ..." src="/img/mountains.jpg" />
  <p>Maybe we can live without libraries, people like you and me. ...</p>
</article>
<article dir="rtl">
  <img class="float-start ..." src="/img/mountains.jpg" />
  <p>... ربما يمكننا العيش بدون مكتبات، أشخاص مثلي ومثلك. ربما. بالتأكيد</p>
</article>

Disabling a float

Use the float-none utility to reset any floats that are applied to an element:

<article>
  <img class="float-none ..." src="/img/mountains.jpg" />
  <p>Maybe we can live without libraries, people like you and me. ...</p>
</article>

Ref