clear
Clears float effects so element moves below floated elements. Essential for preventing layout collapse after float.
Class List
| Class | CSS | Description |
|---|---|---|
clb | clear: both | Clears all floats. Most commonly used |
cll | clear: left | Clears left float only |
clr | clear: right | Clears right float only |
cln | clear: none | No clear (default) |
Usage Examples
<!-- clear: both after float -->
<div>
<div class="fl w50p bg18181B p2rem">Left</div>
<div class="fl w50p bg27272A p2rem">Right</div>
<div class="clb"></div>
</div>
<p>This text is positioned normally below the float area.</p>
<!-- Clear left float only -->
<div class="fl w10rem h8rem bg6366F1 br4px mr16px">Left</div>
<div class="fr w10rem h8rem bg34D399 br4px ml16px">Right</div>
<div class="cll">Moves below left float</div>
<div class="clb"></div>
<!-- Responsive clear -->
<div class="clb sm-cln">
Desktop: clear: both, mobile: disabled
</div>Visual Comparison
Without clear — parent height collapse
Without clear after floats, parent height collapses
With clb — normal behavior
clb (clear: both) makes parent properly contain floated elements
Tips & Notes
clb is sufficient for most cases
clb (clear: both) clears all floats. Safest and most used.
overflow: hidden alternative
oh (overflow: hidden) on parent wraps floated children without clear.