clear
Move a block below preceding floats on the left, right, or both sides.
Overview
| Class | Declarations |
|---|---|
clear:both | clear: both;
|
clear:left | clear: left;
|
clear:none | clear: none;
|
clear:right | clear: right;
|
clear:<type> | clear: <type>;
|
Basic usage
Clearing both left and right floats
Use clear:both on the block that must start below preceding floats on either side. Clearing applies within the same block formatting context; it does not change the floats themselves.
The preview gives the two floats different heights so you can distinguish clearing one side from clearing both.
<div> <div class="float:left h:8.5rem w:34%">Left</div> <div class="float:right h:5.5rem w:34%">Right</div> <div class="clear:both">Clear</div></div>Clearing left floats
Use clear:left when the block must pass the left float. It can still sit beside a taller right float.
<div> <div class="float:left h:4.5rem w:34%">Left</div> <div class="float:right h:8.5rem w:34%">Right</div> <div class="clear:left">Clear</div></div>Clearing right floats
Use clear:right when the block must pass the right float. It can still sit beside a taller left float.
<div> <div class="float:left h:8.5rem w:34%">Left</div> <div class="float:right h:4.5rem w:34%">Right</div> <div class="clear:right">Clear</div></div>Apply conditionally
Use clear:left initially, then clear both sides at sm or in print. The preview also applies clear:both on keyboard focus: press Tab to reach the blue block and compare its position. See selectors and conditions for the syntax.
<div tabindex="0" class="clear:left clear:both:focus-visible clear:both@print clear:both@sm"> Focus with Tab</div>