Clear

Syntax

Class
Properties
clear-left
clear: left;
clear-right
clear: right;
clear-both
clear: both;
clear-none
clear: none;

Using clear-* with left-floated elements.

<div class="t1 w-320 bg-c-white rounded-3 color-text p-16 shadow-4"> <div class="t1 w-32 h-32 m-4 bg-c-blue float-left"></div> <div class="t1 w-32 h-32 m-4 bg-c-blue float-left"></div> <div class="t1 w-32 h-32 m-4 bg-c-green float-left clear-left"></div> <div class="t1 w-32 h-32 m-4 bg-c-blue float-left"></div> <div class="t1 w-32 h-32 m-4 bg-c-blue float-left"></div> <div class="t1 w-32 h-32 m-4 bg-c-blue float-left"></div> </div>

Using clear-* with right-floated elements.

<div class="t1 w-320 bg-c-white rounded-3 color-text p-16 shadow-4"> <div class="t1 w-32 h-32 m-4 bg-c-blue float-right"></div> <div class="t1 w-32 h-32 m-4 bg-c-blue float-right"></div> <div class="t1 w-32 h-32 m-4 bg-c-green float-right clear-left"></div> <div class="t1 w-32 h-32 m-4 bg-c-blue float-right"></div> <div class="t1 w-32 h-32 m-4 bg-c-blue float-right"></div> <div class="t1 w-32 h-32 m-4 bg-c-blue float-right"></div> </div>

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
Clear left.
t1 clear-left
.t1.clear-left { clear: left; }
Clear right.
t1 clear-right
.t1.clear-right { clear: right; }
Clear both.
t1 clear-both
.t1.clear-both { clear: both; }
Clear none.
t1 clear-none
.t1.clear-none { clear: none; }