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