float

Placing an element on the left or right side of its container.

Overview

Text wraps around the floated image and continues in the remaining inline space. Reset the float when the image should return to normal document flow.

Examples

Float elements to the left

Use float:left when inline content should wrap around an element on the left.

<img class="float:left mr:4x" src="/images/avatar.jpg" alt="Avatar">

@layer utilities {    .float\:left {        float: left    }}

Float elements to the right

Use float:right to place a pull quote, image, or callout on the right side of a text flow.

<aside class="float:right ml:4x">    Pull quote</aside>

Reset floats

Use float:none when a responsive or print context should return the element to normal flow.

<img class="float:left float:none@print" src="/images/avatar.jpg" alt="Avatar">

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<img class="float:left:hover float:right@sm float:none@print" src="/images/avatar.jpg" alt="">