Developer
Intros
How it works
API reference
Turbo CSS
Fundamentals
Utilities
Box sizing
Display
Float
Clear
Overflow
Position
Z index
Width
Min width
Max width
Height
Min height
Max height
Margin
Padding
Border
Border width
Border color
Border style
Border radius
Outline
Outline width
Outline color
Outline style
Outline offset
Top
Right
Bottom
Left
Inset
Flex direction
Flex grow
Flex shrink
Flex basis
Flex wrap
Order
Flex
Flex box alignment
Justify content
Align content
Align items
Align self
Table layout
Border collapse
Background attachment
Background clip
Background color
Background position
Background repeat
Background size
Background pattern
Object fit
Object position
Box shadow
Opacity
Visibility
Color
Font family
Font size
Font smoothing
Font style
Font weight
Letter spacing
Line height
List style type
List style position
Tab size
Text align
Text decoration
Text transform
Text overflow
Vertical align
Whitespace
Word break
Transform
Scale
Rotate
Translate
Skew
Transform origin
Transition
Transition property
Transition duration
Transition timing function
Transition delay
Appearance
Cursor
Pointer events
Resize
User select
Fill
Stroke color
Stroke width
Selectors
Download
Turbo UI
Turbo Playground
License
Blog
Developer
Intros
How it works
API reference
Turbo CSS
Blog
Fundamentals
Utilities
Selectors
Download
Turbo UI
Turbo Playground
License
Layout
Box sizing
Display
Float
Clear
Overflow
Position
Z index
Sizing
Width
Min width
Max width
Height
Min height
Max height
Spacing
Margin
Padding
Border
Border
Border width
Border color
Border style
Border radius
Outline
Outline
Outline width
Outline color
Outline style
Outline offset
Coordinates
Top
Right
Bottom
Left
Inset
Flexbox
Flex direction
Flex grow
Flex shrink
Flex basis
Flex wrap
Order
Flex
Flex box alignment
Box alignment
Justify content
Align content
Align items
Align self
Table
Table layout
Border collapse
Background
Background attachment
Background clip
Background color
Background position
Background repeat
Background size
Background pattern
Object
Object fit
Object position
Effects
Box shadow
Opacity
Visibility
Text
Color
Font family
Font size
Font smoothing
Font style
Font weight
Letter spacing
Line height
List style type
List style position
Tab size
Text align
Text decoration
Text transform
Text overflow
Vertical align
Whitespace
Word break
Transform
Transform
Scale
Rotate
Translate
Skew
Transform origin
Transition
Transition
Transition property
Transition duration
Transition timing function
Transition delay
Interactivity
Appearance
Cursor
Pointer events
Resize
User select
SVG
Fill
Stroke color
Stroke width
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.
clear-left
clear-right
clear-both
clear-none
<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.
clear-left
clear-right
clear-both
clear-none
<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; }