Syntax

Float

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

Overview

ClassDeclarations
float:directionfloat: direction;
float:leftfloat: left;
float:rightfloat: right;
float:nonefloat: none;
Float Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et elit dictum, tempor augue quis, rhoncus enim. Nunc lacinia, velit vel convallis tincidunt, ante nisi maximus nunc, at aliquam nisi lectus in mauris. Nam eros sem, ullamcorper nec mollis nec, imperdiet a metus.

<img class="float:left" />
<p>Lorem ipsum dolor sit amet …</p>

Basic usage

Float elements to the left

Use float:left to place an element to the left of its container.

Float Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et elit dictum, tempor augue quis, rhoncus enim. Nunc lacinia, velit vel convallis tincidunt, ante nisi maximus nunc, at aliquam nisi lectus in mauris. Nam eros sem, ullamcorper nec mollis nec, imperdiet a metus.

<img class="float:left" />
<p>Lorem ipsum dolor sit amet …</p>

Float elements to the right

Use float:right to place an element to the right of its container.

Float Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et elit dictum, tempor augue quis, rhoncus enim. Nunc lacinia, velit vel convallis tincidunt, ante nisi maximus nunc, at aliquam nisi lectus in mauris. Nam eros sem, ullamcorper nec mollis nec, imperdiet a metus.

<img class="float:right" />
<p>Lorem ipsum dolor sit amet …</p>

Not float

Use float:none to reset floats that are applied to an element.

Float Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et elit dictum, tempor augue quis, rhoncus enim. Nunc lacinia, velit vel convallis tincidunt, ante nisi maximus nunc, at aliquam nisi lectus in mauris. Nam eros sem, ullamcorper nec mollis nec, imperdiet a metus.

<img class="float:none" />
<p>Lorem ipsum dolor sit amet …</p>

Conditionally apply

Apply styles based on different states using selectors and applying conditionally.

<div class="float:left:hover float:left@sm float:left@dark float:left@print"></div>
Design Token
Colors

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.