Float Utilities `float-*`

Control the float behavior of elements to create text wrapping and legacy layout patterns.

Quick Reference

float-left

Float element to the left

float: left

float-right

Float element to the right

float: right

float-none

Remove float behavior

float: none

clear-*

Clear float behavior

clear: left/right/both

Interactive Examples

Float Left

This text wraps around the floated element. 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.

 <div class="float-left w-24 h-24">Float Left</div>
 <p>Text wraps around the floated element...</p>

Float Right

This text wraps around the right-floated element. 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.

 <div class="float-right w-24 h-24">Float Right</div>
 <p>Text wraps around the floated element...</p>

Multiple Floated Elements

Left 1

Left 2

Right

Multiple elements can be floated in the same container. This text flows around all the floated elements, creating a complex layout pattern. The left-floated elements stack horizontally, while the right-floated element positions itself on the opposite side.

Float None (Reset)

With Float

This element is floated left.

Float Removed

This element has float: none applied.

 <div class="float-left">Floated</div>
 <div class="float-none">Not floated</div>

Common Use Cases

📰 Article Images

Float images within article content for text wrapping.

<img class="float-left mr-4">

💬 Chat Bubbles

Position chat messages to left or right sides.

<div class="float-right">

🏷️ Pull Quotes

Create floating pull quotes within text content.

<blockquote class="float-right">

📊 Data Widgets

Float small data displays within content areas.

<div class="float-left w-32">

🔘 Action Buttons

Position action buttons to specific sides.

<button class="float-right">

📱 Legacy Layouts

Support older layout patterns and legacy code.

<div class="float-left w-1/3">

Float Behavior & Characteristics

How Floats Work

Removed from Normal Flow

Floated elements are taken out of the normal document flow

Text Wrapping

Inline content flows around the floated element

Stacking Behavior

Multiple floats stack horizontally until they wrap

Container Collapse

Parent containers may collapse without clearfix

Visual Flow Demonstration

Normal Flow

With Float Left

Common Issues & Solutions

⚠️ Common Issues

•
Container Collapse: Parent containers don't wrap around floated children
•
Unexpected Wrapping: Floated elements wrap to new lines unexpectedly
•
Z-index Issues: Floated elements may appear behind other content
•
Mobile Problems: Float layouts often break on small screens

✅ Solutions

•
Use Clearfix: Apply clearfix to parent containers
•
Set Widths: Define explicit widths to control wrapping behavior
•
Use Clear: Apply clear-* utilities when needed
•
Consider Flexbox: Use modern layout methods for complex layouts

Best Practices

✅ Do

• Use for simple text wrapping around images
• Apply clearfix to parent containers
• Test on different screen sizes
• Use with responsive utilities
• Consider margins for proper spacing
• Use float-none to reset on mobile

❌ Don't

• Use for complex grid layouts
• Forget to clear floats when needed
• Rely on floats for modern responsive design
• Use without understanding the implications
• Apply to elements that don't need it
• Use when flexbox or grid would be better

Related Layout Classes

float-*

Current page