What float Does
float pushes an element to the left or right of its container, removing it from normal flow. Subsequent inline content (text, inline elements) flows around the floated element. Block-level siblings, however, flow under the floated element (they ignore it).
float: left; /* push element to the left, content wraps on the right */
float: right; /* push element to the right, content wraps on the left */
float: none; /* default — no float */
float: inline-start; /* logical version — left in LTR, right in RTL */
float: inline-end;Image + Text Wrapping — Float's Best Use
Wrapping text around an image is float's original purpose and where it still shines today:
/* Float the image left so text wraps on its right */
.article-image {
float: left;
width: 280px;
margin: 0 24px 16px 0; /* space between image and text */
border-radius: 6px;
}<article>
<img class="article-image" src="photo.jpg" alt="Description">
<p>This text wraps naturally around the floated image.
The float removes the image from flow but inline content
respects its position and wraps around it.</p>
<p>Additional paragraphs continue to wrap if the image
is still taller than the text above.</p>
</article>This text wraps around the floated element on the left. The float removes the element from normal flow so that inline content — text, links, inline elements — flows around it naturally. This is exactly how newspaper layouts work.
The Container Collapse Problem
When all children are floated, the parent container collapses to zero height — it can't see floated children. This is the most notorious float problem:
<div class="parent"> <!-- height collapses to 0! -->
<div class="child" style="float: left;">Floated</div>
<div class="child" style="float: left;">Floated</div>
</div>
<p>This paragraph sits where the parent should be</p>The parent's background, border, and padding are all invisible because the parent has no height.
clear – Stopping Float Wrap
clear tells an element to move below any floats instead of flowing alongside them.
clear: left; /* move below left-floated elements */
clear: right; /* move below right-floated elements */
clear: both; /* move below all floated elements (most common) */
clear: none; /* default — don't clear */
/* Example: footer below floated columns */
.footer { clear: both; }
/* Stop text from wrapping past a specific point */
.clearfix-element { clear: both; }The Clearfix Pattern
The modern, CSS-only solution to the container collapse problem. Instead of adding a clearing element to the HTML, use a pseudo-element:
/* Classic clearfix — add .clearfix to the container with floated children */
.clearfix::after {
content: "";
display: block;
clear: both;
}
/* Modern alternative — display: flow-root creates a new formatting context */
.container { display: flow-root; }
/* This contains floats without any pseudo-elements */
/* Also works but has side effects: */
.container { overflow: hidden; } /* clips content — use with caution */display: flow-root creates a new block formatting context, which contains floated children without needing pseudo-elements. It's cleaner, has no side effects (unlike overflow: hidden), and is the modern best practice. The clearfix hack is still widely used in legacy code, so you need to recognize it.
Float vs Flexbox vs Grid
/* USE FLOAT for: */
/* 1. Text wrapping around images */
.article img { float: left; margin-right: 16px; }
/* 2. Drop caps */
.article p:first-of-type::first-letter {
float: left;
font-size: 3em;
line-height: 0.8;
margin-right: 4px;
}
/* DON'T USE FLOAT for: */
/* Navigation bars — use display: flex */
/* Multi-column page layout — use display: grid */
/* Card grids — use display: grid with auto-fit */
/* Equal-height columns — use display: flex */
/* Any layout that needs vertical alignment — use flex or grid */If you work on any codebase more than 5 years old, you will encounter float-based layouts with clearfix everywhere. Understanding float helps you maintain and gradually modernize this code — replacing float column layouts with flex or grid as you touch each component.
📋 Summary
- float: left/right — pushes element to an edge, inline content wraps around it.
- Float removes the element from normal block flow but inline content still wraps around it.
- Container collapse — parents of floated elements lose their height.
- clear: both — forces an element below all floats.
- Clearfix —
.clearfix::after { content:""; display:block; clear:both; }contains floats. - display: flow-root — modern replacement for clearfix. No pseudo-elements needed.
- Use float for: text wrapping around images, drop caps.
- Use flexbox/grid for: all layout work.
Frequently Asked Questions
Yes — for two reasons: (1) You will encounter float in legacy codebases and need to understand and maintain it. (2) Float is still the right tool for wrapping text around images. However, you should not use float for page layout or component layout in new projects — use flexbox and grid instead. Learning float takes 30 minutes; it's worth it just for legacy code comprehension.
Clearfix is a CSS hack from the pre-flexbox era (2000s–2010s) to fix the container collapse problem caused by floated children. It works by injecting an invisible clearing pseudo-element after the container's content, forcing the container to expand around its floated children. It's found in nearly every legacy project and in older versions of Bootstrap. In new code, use display: flow-root or switch the layout to flexbox/grid which don't have the collapse problem at all.
The parent container collapses to zero height (no height from floated children). Elements after the container overlap the floated elements rather than appearing below them. Background colors and borders on the parent become invisible. Text from subsequent sections flows around the floated elements unexpectedly. In short: layout breaks in confusing ways. Always contain floats with clearfix, overflow: hidden, or display: flow-root on the parent.