CSS Float — Floating Elements and Clearfix

What is Float?

The float property was originally designed to wrap text around images (like in print magazines). It removes an element from the normal document flow and pushes it to the left or right, allowing text and inline elements to wrap around it.

Modern note: Float is no longer recommended for page layouts. Use Flexbox or Grid instead. Float is still useful for text wrapping around images.

Float - Text Wrapping and Clear

/* Float values */
.float-left  { float: left; }
.float-right { float: right; }
.float-none  { float: none; }  /* default */

/* Image float - text wraps around */
.article img {
    float: left;
    margin: 0 20px 10px 0;  /* space between image and text */
    max-width: 300px;
}

/* clear - stop wrapping around floated elements */
.clear-left  { clear: left; }   /* clears left floats */
.clear-right { clear: right; }  /* clears right floats */
.clear-both  { clear: both; }   /* clears all floats */

/* Clearfix - fix parent collapsing when all children are floated */
/* Problem: parent has 0 height when children are floated */

/* Method 1: overflow hack */
.clearfix-overflow { overflow: auto; }

/* Method 2: ::after pseudo-element (classic clearfix) */
.clearfix::after {
    content: '';
    display: table;
    clear: both;
}

/* Method 3: display: flow-root (modern, no side effects) */
.clearfix-modern { display: flow-root; }

/* Float-based column layout (legacy) */
.col-left {
    float: left;
    width: 70%;
}
.col-right {
    float: right;
    width: 28%;
}
.row::after {
    content: '';
    display: table;
    clear: both;
}

/* Modern alternative - use Flexbox instead */
.row-flex {
    display: flex;
    gap: 2%;
}
.col-main { flex: 0 0 70%; }
.col-side { flex: 0 0 28%; }

Key Takeaways

Float was designed for text wrapping around images - not for page layout.
Use Flexbox or CSS Grid for modern layouts instead of float-based columns.
Floated elements are removed from normal flow - their parent collapses to zero height.
Fix parent collapse with display: flow-root (modern) or the clearfix ::after hack (legacy).
clear: both stops an element from wrapping around any floated elements above it.
Float is still valid and useful for wrapping text around images in articles and blog posts.

CSS Float — Floating Elements and Clearfix

What is Float?

Level Up Your Css Skills

Popular Tutorials

Ready to Level Up Your Skills?