float

Wrap text around an object on the left or right of its container.

Overview

Text flow

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.

Choose a float value in the syntax table to move the same image within this paragraph.

Examples

Float elements to the left

Use float:left for an image or callout that text should wrap around. Give the floated object a width and leave space between it and the paragraph.

<img class="float:left w:8rem mr-md" src="/demo/landscape.svg" alt="Sun above layered mountains">

@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 w:8rem ml-md">  Good tools make room for clear thinking.</aside>

Reset floats

Use float:none to return the object to normal flow. This example removes the float in print; open Print preview to see the paragraph continue after the image.

<img class="float:left w:8rem mr-md float:none@print" src="/demo/landscape.svg" alt="Sun above layered mountains">

Apply conditionally

Keep the image in normal flow on narrow screens and float it to the right on screens at sm. The screen&sm condition excludes print, so the image remains in normal flow on printed pages. Resize the preview or open Print preview to compare. Read conditions for the syntax.

<img class="float:none w:8rem ml-md float:none@print float:right@screen@sm" src="/demo/landscape.svg" alt="Sun above layered mountains">