How floats remove elements from normal document flow and enable text wrapping
Using float: left and float: right for magazine-style layouts
Understanding and solving the float collapse problem
Using clear to control float behavior
Modern alternatives to floats for page layouts (Flexbox and Grid)
When floats are still the right tool (text wrapping and shape-outside)
Introduction to Floats
Before Flexbox and Grid, float was the primary way to create multi-column layouts.
While less common today for page layouts, floats are still useful and appropriate for their
original purpose: wrapping text around images and creating magazine-style layouts.
Floats remove an element from normal document flow and shift it to the left or right side of
its container. Subsequent content then flows around the floated element. Understanding floats
is important both for maintaining legacy code and for creating text-wrapping effects that
modern layout systems don't handle as elegantly.
float: left - Text Wraps on the Right
When you float an element left, it moves to the left side of its container and subsequent
content wraps around it on the right. This is the classic magazine layout where images sit
on the left with text flowing alongside.
Syntax
.image {
float: left;
margin: 0 1rem 1rem 0; /* Add space around the image */
}
Example
<article>
<img src="photo.jpg" class="image" alt="Article image">
<p>This text wraps around the floated image...</p>
<p>More paragraphs continue to wrap...</p>
</article>
Rendered Result:
float: right - Text Wraps on the Left
Floating an element right moves it to the right side, with content wrapping on the left.
This is commonly used for pull quotes, sidebars, and images that should appear on the right
side of an article.
<article>
<blockquote class="pullquote">
"Floats are perfect for text wrapping!"
</blockquote>
<p>Article text flows around the pull quote...</p>
</article>
Rendered Result:
The Float Collapse Problem
When all children of a container are floated, the container doesn't automatically expand to
contain them. This is called float collapse and it happens because floated elements are
removed from normal document flow. The container acts as if the floated children don't exist.
The Problem
<div class="container">
<div class="box float-left">Floated Box</div>
<p>Some text...</p>
</div>
<!-- Container might not fully wrap the floated box! -->
The clear property forces an element to move below any floated elements instead
of wrapping around them. Use clear: both to ensure an element appears below all
floats, regardless of direction.
This is the primary legitimate use case for floats in modern CSS. Floats allow text to wrap
naturally around images, creating professional magazine-style layouts.
Syntax
.article-image {
float: left;
width: 250px;
margin: 0 1.5rem 1rem 0; /* Right and bottom margins */
border-radius: 8px;
}
Example
<article>
<img src="article-photo.jpg" class="article-image" alt="Article photo">
<h2>Article Title</h2>
<p>Text wraps naturally around the image, creating a professional
magazine-style layout. Multiple paragraphs continue to flow...</p>
<p>Additional content wraps until cleared...</p>
</article>
Rendered Result:
Advanced: shape-outside
Modern CSS allows text to wrap around non-rectangular shapes using shape-outside.
This only works with floated elements and creates elegant, magazine-quality text wrapping
around circles, polygons, and images.