What is CSS Float?
The float property is one of CSS's traditional layout mechanisms. It specifies how an element should float, allowing text and inline elements to wrap around it. While modern layout techniques like Flexbox and Grid are now preferred for complex layouts, float remains useful for specific scenarios.
Key Concepts:
- Float Values: left, right, none, inherit
- Floated Elements: Removed from normal document flow
- Container Collapse: Containers with only floated elements collapse to zero height
- Clearing Floats: Required to restore normal document flow
Basic Float Examples
Float Left vs Float Right
This text wraps around the floated element. The float: left property moves the element to the left side of its container, allowing other content to flow around its right side. This was traditionally used for creating text wrapping around images or creating multi-column layouts before Flexbox and Grid were widely supported.
This text wraps around the floated element. The float: right property moves the element to the right side of its container, allowing other content to flow around its left side. This is commonly used for pull quotes in articles or for positioning images on the right side of text content.
.float-left {
float: left;
margin-right: 15px;
}
.float-right {
float: right;
margin-left: 15px;
}The Clear Property
The clear property specifies which sides of an element cannot be adjacent to earlier floating elements. It's essential for controlling the flow of elements around floated items.
This text flows around both floated elements.
.clear-left {
clear: left;
}
.clear-right {
clear: right;
}
.clear-both {
clear: both;
}The Clearfix Hack
When a container has only floated elements, it collapses to zero height. The "clearfix hack" is a common solution to make the container properly contain its floated children.
Container Collapse Problem
👆 The container above has collapsed because it contains only floated elements.
Clearfix Solution
👆 The container above properly contains its floated children thanks to the clearfix.
/* Modern clearfix using ::after pseudo-element */
.clearfix-container::after {
content: "";
display: block;
clear: both;
}Practical Use Cases
Image with Text Wrap
This is a common use case for float where an image is floated to allow text to wrap around it. Before Flexbox and Grid, this was one of the primary ways to achieve this layout effect. The float property was originally designed specifically for this purpose - to allow text to flow around images, similar to how it works in print layouts.
Notice how the text naturally wraps around the floated image element, creating a nice visual flow. This technique is still useful today for simple text-and-image layouts within content areas.
.float-image {
float: left;
width: 150px;
height: 150px;
margin-right: 15px;
background-color: #3498db;
background-image: url('../images/css_favicon.png');
background-size: 50px;
background-position: center;
background-repeat: no-repeat;
}Simple Multi-Column Layout
Historically, float was used to create multi-column layouts before Flexbox and Grid were available.
Each column is floated left with a specific width percentage to create the layout.
Modern layouts should use Flexbox or Grid instead, but this demonstrates how float works.
.float-column {
float: left;
width: 30%;
margin-right: 5%;
padding: 15px;
box-sizing: border-box;
background-color: #f8f9fa;
border-radius: 5px;
}
.float-column:last-child {
margin-right: 0;
}Modern Alternatives to Float
While float is still useful for specific cases like text wrapping around images, modern CSS offers better alternatives for layout:
Recommended Alternatives:
- Flexbox: For one-dimensional layouts (rows or columns)
- Grid: For two-dimensional layouts (rows and columns)
- Multi-column Layout: For text-heavy content in multiple columns
These modern layout methods provide better control, responsiveness, and accessibility compared to float-based layouts.
Interactive Float Playground
Experiment with different float values by clicking the buttons below:
This text will wrap around the floated element based on your selection. Try different float and clear values to see how they affect the layout. The float property determines which side the element floats to, while the clear property controls how subsequent elements interact with floated elements.
Current CSS:
.playground-item {
float: none;
clear: none;
}