CSS Float

CSS Float: Text Wrapping and Legacy Layout Clearance

The CSS float property pushes an element to the left or right edge of its container so surrounding inline text and paragraphs flow neatly around it. While older websites abused floats for multi-column grids, modern CSS uses Flexbox and Grid for page layout and reserves float mainly for wrapping editorial text around photos or pull quotes.

Using Float, Clear, and flow-root

When an element floats (float: left; or float: right;), it leaves normal vertical block flow. Later sections that should start below the floated image—like a footer or next chapter—use clear: both; to drop underneath it.

Because a parent container ignores the height of floated children by default, its background and border collapse to zero height unless you clear it cleanly with display: flow-root; on the parent.

.article-summary {
    display: flow-root;
    border: 1px solid #e2e8f0;
    padding: 16px;
    border-radius: 8px;
}

.article-thumb {
    float: left;
    width: 140px;
    margin-right: 16px;
    margin-bottom: 8px;
    border-radius: 6px;
}

.section-break {
    clear: both;
}

Float vs. Flexbox and Grid

Never build navigation bars, card grids, or page columns with float. Flexbox handles one-dimensional rows and alignment effortlessly without height collapse bugs, and CSS Grid handles responsive multi-column grids in three lines of CSS.

Common Mistakes to Avoid

• Building new page layouts with float: left: Floats require clearfix hacks and break vertical centering; reach for display: flex or display: grid instead.
• Using the old overflow: hidden clearfix hack everywhere: display: flow-root; contains floated children natively without accidentally clipping shadows or sticky headers.
• Forgetting margin next to a floated image: Always add margin-right (or margin-left) on floated images so paragraph letters do not touch the photo edge.

Frequently Asked Questions

What does display: flow-root do for floated elements?

display: flow-root creates a clean block formatting context on the parent container so it wraps around floated children automatically without extra clearfix pseudo-elements.

Does float still work inside Flex or Grid containers?

No. Inside a display: flex or display: grid parent, float and clear properties have zero effect on direct children.