Tailwind CSS Float & Clear Cheatsheet
Complete reference for Tailwind float and clear utilities.
Interactive demos show text wrapping behavior. Click to copy class names.
Float Utilities
Float an element to the left or right of its container, allowing text and inline elements to wrap around it.
Clear Utilities
Control whether an element should move below preceding floated elements.
Interactive Demos
See float and clear utilities in action
float-left - Text Wrapping Demo
The image floats to the left, and text wraps around it on the right side.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
<img class="float-left mr-4 mb-2" src="..." /> <p>Text wraps around the image...</p>
float-right - Text Wrapping Demo
The image floats to the right, and text wraps around it on the left side.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
<img class="float-right ml-4 mb-2" src="..." /> <p>Text wraps around the image...</p>
float-start / float-end - Logical Properties
Logical float values respect text direction. Toggle RTL to see the difference.
This text is in LTR mode. The float-start element floats to the left. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Tip: Use float-start and float-end for internationalized layouts that need to support both LTR and RTL languages.
clear-both - Clearing Floats
Use clear-both to ensure content appears below all floated elements.
Without clear-both
Short text...
This content flows between floats (not below)
With clear-both
Short text...
This content is pushed below all floats
<div class="float-left">Left</div> <div class="float-right">Right</div> <p>Content between floats...</p> <div class="clear-both"></div> <div>This content appears below all floats</div>
clear-left / clear-right - Selective Clearing
Clear only left or right floats when you need more control.
clear-left
Cleared left only - still beside right float
clear-right
Cleared right only - still beside left float
Multiple Floated Elements
Multiple floated elements stack horizontally until they run out of space.
Multiple elements with float-left will stack from left to right. Text wraps around all of them. This pattern is commonly used for image galleries or simple grid layouts, though flexbox and grid are generally preferred for these use cases today.
<div class="float-left w-20 h-20 mr-2">1</div> <div class="float-left w-24 h-16 mr-2">2</div> <div class="float-left w-16 h-24 mr-2">3</div> <p>Text wraps around all floated elements...</p> <div class="clear-both"></div>
float-none - Removing Floats
Use float-none to remove float behavior, often used in responsive designs.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
Responsive pattern: Use float-left md:float-none to float on mobile but not on larger screens.
When to Use Float vs Flexbox/Grid
Use Float For:
- +Wrapping text around images
- +Editorial/magazine-style layouts
- +Pull quotes in articles
- +Drop caps in typography
Use Flexbox/Grid For:
- +Page layouts and columns
- +Navigation and menus
- +Card grids and galleries
- +Centering and alignment
- +Complex responsive layouts
Common Float Patterns
Article with Image
<article>
<img class="float-left mr-4 mb-2
w-32 rounded" src="..." />
<p>Article text wraps around
the image naturally...</p>
</article>Pull Quote
<blockquote class="float-right
ml-4 mb-2 w-48 text-xl italic
border-l-4 border-primary pl-4">
"A notable quote..."
</blockquote>
<p>Main article text...</p>Drop Cap
<p>
<span class="float-left text-5xl
font-bold mr-2 leading-none">
O
</span>
nce upon a time...
</p>Responsive Float
<img class="w-full md:w-48
md:float-left md:mr-4 mb-4
rounded" src="..." />
<p>On mobile: full width image
On desktop: floated left</p>Clearfix Container
<!-- Using after pseudo-element -->
<div class="after:content-['']
after:block after:clear-both">
<div class="float-left">...</div>
<div class="float-right">...</div>
</div>RTL-Safe Float
<!-- Works in both LTR and RTL -->
<img class="float-start me-4 mb-2"
src="..." />
<p>Text wraps correctly in
any text direction...</p>Quick Reference Table
| Class | CSS | Description |
|---|---|---|
float-start | float: inline-start; | Float to the start of text direction (LTR: left, RTL: right) |
float-end | float: inline-end; | Float to the end of text direction (LTR: right, RTL: left) |
float-right | float: right; | Float element to the right |
float-left | float: left; | Float element to the left |
float-none | float: none; | Remove float from element |
clear-start | clear: inline-start; | Clear floats at text direction start |
clear-end | clear: inline-end; | Clear floats at text direction end |
clear-left | clear: left; | Move below left-floated elements |
clear-right | clear: right; | Move below right-floated elements |
clear-both | clear: both; | Move below all floated elements |
clear-none | clear: none; | Don't clear any floats (default) |
Frequently Asked Questions
What is the difference between float-start and float-left in Tailwind?
float-start and float-end are logical properties that respect the text direction (LTR/RTL). In left-to-right languages, float-start behaves like float-left. In right-to-left languages, float-start behaves like float-right. Use logical properties for internationalized layouts.
When should I use float vs flexbox or grid in Tailwind?
Floats are best for wrapping text around images or elements, like in editorial layouts. For complex page layouts, component alignment, or centering, use flexbox or grid instead. Flexbox and grid are more powerful and predictable for modern layouts.
What does clear-both do in Tailwind CSS?
clear-both ensures an element moves below any floated elements on both the left and right sides. It's commonly used to prevent layout issues where content incorrectly flows around floated elements.
How do I wrap text around an image in Tailwind?
Add float-left or float-right to the image, and optionally add margin classes (like mr-4 mb-2 for float-left) to create spacing between the image and text. The text will automatically wrap around the floated image.
Why doesn't my container expand to contain floated elements?
Floated elements are taken out of the normal document flow, so their parent container collapses. Use clear-both on an element after the floats, or use the clearfix technique with after:content-[''] after:block after:clear-both on the parent.
Can I use float with responsive breakpoints?
Yes! Use responsive prefixes like md:float-left or lg:float-none to apply float only at certain breakpoints. This is useful for layouts where you want images to float on desktop but stack on mobile.
Explore more Tailwind tools
Tailwind Grid Generator
Create grid layouts visually
Tailwind Flexbox Generator
Create flex layouts visually
Tailwind Gradient Generator
Create custom gradients
Tailwind Text Gradient
Gradient text effects
Tailwind Gradients Collection
275+ ready-to-use gradients
Tailwind Colors
Complete 240+ color palette
Tailwind Box Shadow Generator
Design multi-layer shadows
Tailwind Text Shadow
Add depth to text with shadows
Tailwind Filter Generator
Apply blur, brightness & more
Tailwind Transform Generator
Rotate, scale & translate elements
Tailwind Animation Generator
Create built-in & custom animations
Tailwind Transition Generator
Smooth hover transitions
Tailwind Config Generator
Generate your config file
Tailwind Input Generator
Design form inputs visually
Tailwind Class Sorter
Organize classes in order
Flexbox Cheatsheet
All flex utilities visualized
Overflow Cheatsheet
Control content overflow