Syntax

Clear

Moving an element below floating elements instead of floating to the left or right.

🚧This page is still under construction and some content may not be complete.

Overview

ClassDeclarations
clear:typeclear: type;
clear:bothclear: both;
clear:leftclear: left;
clear:noneclear: none;
clear:rightclear: right;

Basic usage

Clearing both left and right floats

Use both:clear to move the element below all floated elements.

Left
Right
Clear
<div>
<div class="float:left">Left</div>
<div class="float:right">Right</div>
<div class="clear:both">Clear</div>
</div>

Clearing left floats

Use both:left to move the element below all left floated elements.

Right
Right
Left
Clear
<div>
<div class="float:right">Right</div>
<div class="float:right">Right</div>
<div class="float:left">Left</div>
<div class="clear:left">Clear</div>
</div>

Clearing right floats

Use both:right to move the element below all right floated elements.

Left
Left
Right
Clear
<div>
<div class="float:left">Left</div>
<div class="float:left">Left</div>
<div class="float:right">Right</div>
<div class="clear:left">Clear</div>
</div>

Conditionally apply

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

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

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.