Clear

Utility	Properties
Failed to load data. Please try again later.

Both

This example sets the clear property to both. The cl-b utility ensures that the element is moved below any floating elements on both sides.

<div class="bg-indigo d-32 fl-l rad-1"></div>
<div class="bg-indigo d-32 fl-r rad-1"></div>
<div class="cl-b p-6" id="area"></div>

Inline End

This example sets the clear property to inline-end. The cl-ie utility ensures that the element is moved below any floating elements on the inline end side, which is typically the right side in left-to-right layouts.

<div class="bg-indigo d-32 fl-r rad-1"></div>
<div class="cl-ie p-6" id="area"></div>

Inline Start

This example sets the clear property to inline-start. The cl-is utility ensures that the element is moved below any floating elements on the inline start side, which is typically the left side in left-to-right layouts.

<div class="bg-indigo d-32 fl-l rad-1"></div>
<div class="cl-is p-6" id="area"></div>

Left

This example sets the clear property to left. The cl-l utility ensures that the element is moved below any floating elements on the left side.

<div class="bg-indigo d-32 fl-l rad-1"></div>
<div class="cl-l p-6" id="area"></div>

None

Initial value

This example sets the clear property to none. The cl-none utility allows the element to be positioned normally without clearing any floating elements.

<div class="bg-indigo d-32 fl-l rad-1"></div>
<div class="cl-none p-6" id="area"></div>

Right

This example sets the clear property to right. The cl-r utility ensures that the element is moved below any floating elements on the right side.

<div class="bg-indigo d-32 fl-r rad-1"></div>
<div class="cl-r p-6" id="area"></div>

Conditional styles

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

Media modifier

You can combine responsive breakpoints like sm:-*,md:-*, lg:-*, and xxl:-* allows targeting specific utilities in different viewports.

<div class="cl-l md:cl-r ..."></div>

Hover modifier

Alternatively, you can apply :hover by using h:-* utility to override elements and change their values when hovering over them.

<div class="cl-l h:cl-r ..."></div>