Layout

Clear

Style syntax for 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 [sr-only]

ClassDeclarations
clear:typeclear: type
clear:bothclear: both
clear:leftclear: left
clear:noneclear: none
clear:rightclear: right
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:both">Clear</div>
</div>

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 in different states using selectors, media queries, etc.

<div class="clear:both:hover clear:both@sm clear:both@dark clear:both@print"></div>
PREVIOUS
Break Inside

Style syntax for controlling how page, column, or region breaks should occur within the specified element.

NEXT
Column Span

Style syntax for setting how elements span across multiple columns.

MIT License © Aoyue Design LLC.