Float

None

Initial value

The element will not float, and it will be displayed in the normal flow of the document.

<div class="h-14 p-r tc-white" id="area">
  <div class="ai-c bg-indigo d-f d-14 fl-none jc-c rad-1">A</div>
</div>

Inline End

The element will float to the end of the inline direction, which is typically the right side in left-to-right languages.

<div class="h-14 p-r tc-white" id="area">
  <div class="ai-c bg-indigo d-f d-14 fl-ie jc-c rad-1">A</div>
</div>

Inline Start

The element will float to the start of the inline direction, which is typically the left side in left-to-right languages.

<div class="h-14 p-r tc-white" id="area">
  <div class="ai-c bg-indigo d-f d-14 fl-is jc-c rad-1">A</div>
</div>

Left

The element will float to the left side of its container, allowing text and inline elements to wrap around it.

<div class="h-14 p-r tc-white" id="area">
  <div class="ai-c bg-indigo d-f d-14 fl-l jc-c rad-1">A</div>
</div>

Right

The element will float to the right side of its container, allowing text and inline elements to wrap around it.

<div class="h-14 p-r tc-white" id="area">
  <div class="ai-c bg-indigo d-f d-14 fl-r jc-c rad-1">A</div>
</div>

Using utility variants

Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.

Using media queries

Using hover states