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
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>