Clear

Usage

None

Allow the element to be positioned normally without clearing floats.

<div class="fl-l w-32 h-32 bg-indigo"></div>
<div class="cl-none p-6"></div>

Both

Move the element below floating elements on both sides.

<div class="fl-l w-32 h-32 bg-indigo"></div>
<div class="fl-r w-32 h-32 bg-indigo"></div>
<div class="cl-b p-6"></div>

Inline End

Move the element below floating elements on the inline end side.

<div class="fl-r w-32 h-32 bg-indigo"></div>
<div class="cl-ie p-6"></div>

Inline Start

Move the element below floating elements on the inline start side.

<div class="fl-l w-32 h-32 bg-indigo"></div>
<div class="cl-is p-6"></div>

Left

Move the element below floating elements on the left side.

<div class="fl-l w-32 h-32 bg-indigo"></div>
<div class="cl-l p-6"></div>

Right

Move the element below floating elements on the right side.

<div class="fl-r w-32 h-32 bg-indigo"></div>
<div class="cl-r p-6"></div>

Responsiveness

Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.

Target viewport sizes with breakpoint prefixes.

Hover State

Apply styles conditionally on hover using the h: prefix.