Floats Still Have a Place — But They Need Boundaries

Flexbox and Grid get most of the attention these days, and rightly so. They were built for layout. Floats were originally meant to let text flow around images, like in a magazine spread. Yet floats still show up in real code, particularly for media objects: an image or video on one side with text beside it. Floats are lighter than Flexbox or Grid in some cases and need less markup.

The problem is that using a float pulls the element out of the document's normal flow. That single behavior leads to a family of layout bugs that confuse developers — collapsed parent heights, overlapping content, and text that wraps where you don't want it to. None of those are actually bugs, though. They are the float behaving exactly as specified. The challenge is containing that behavior, and the tool for the job is a block formatting context, or BFC.

What a Block Formatting Context Does

A BFC is, in plain terms, a region of the page where block-level elements follow their own internal layout rules. The floats inside a BFC stay contained within it; they no longer leak out and interfere with elements outside the container.

You can create a BFC in any of several ways:

  • A float value other than none.
  • An overflow value other than visible or clip.
  • A display value including flex, inline-flex, grid, inline-grid, inline-block, table-cell, or table-caption.
  • Multi-column containers whose column values are not auto.
  • A contain value of content, paint, or layout.
  • A position of absolute or fixed.
  • A display value of flow-root.

Note that while floats themselves create a BFC, that is precisely the problem when you are building a component with floated children: each float establishes its own context while the parent has none. The fixes below all amount to giving the parent its own BFC so it can contain the floats already at work inside it.

Three Float Failures in a Media Object

To see these failures in practice, consider a simple test: a grid of testimonial cards. Each <article> holds an <img> floated left and a <div> with a paragraph of text. That structure is all you need to trigger the three most common float complaints.

1. Height Collapse

When you float the image inside each card, it is no longer part of the parent's normal flow. A floated element contributes zero height to its container. The card therefore shrinks to fit only its non-floated children — the text block — even though the image is visually overflowing the card's bottom edge. Add a border to the card container and the effect becomes obvious: the visible boundary sits well above the bottom of the floated image.

2. Overlapping Neighboring Content

Because floated elements are removed from the flow, they can overlap content that follows them. Put an <h2> after the testimonials container and the floated content can slide over it. The symptom is easy to miss until the overlap creates a usability failure — say, when a heading is replaced by a form, and a click intended for one thing focuses an input hidden behind the card. The float, not the form, is at fault, but the interaction break is real.

3. Unwanted Text Wrapping

There is nothing wrong with text wrapping beside a floated image — that is what floats are for. But in a media object, you usually want descriptive text in a block, not flowing around the image. The wrapping is not a defect; it is the rendering engine following the spec. You are chasing a workaround if you set out to "fix" a float's wrapping behavior with more floats. Flexbox or Grid would be the honest solution for a true side-by-side pattern.

Solutions: From Hack to Purpose-Built

All three problems trace back to the same root cause: the floats need to be enclosed in a BFC. The classic fixes do exactly that, though with varying degrees of elegance.

Clearfix

The original workaround was the clearfix hack. One way to apply it is to add an extra empty element after the floated content with clear: both, forcing the parent to expand and include the floats. A cleaner variant achieves the same effect without the extra markup by using the parent's ::after pseudo-element:

With a clears applied, the container's height includes the floated elements, ending the overlap and preserving the wrapping behavior you want for true "text beside floated media." None of this is needed if you switch to Flexbox or Grid in the first place, of course.

overflow — The Common Shortcut

A single property assignment has survived as the most widely used fix:


.container {
  overflow: auto;
}

Set on the testimonials container, this overflow value produces a BFC that contains all the floated cards, so no extra elements or pseudo-elements are required. It resolves the height collapse and the overlapping heading behind it instantly.

The catch: overflow was never designed for layout. It is meant for controlling how overflowing content is handled — scrollbars, clipping, and data loss. A value chosen for its BFC side effect can produce its own surprises, like an unintended scrollbar on a container whose content legitimately overflows.

display: flow-root — The Proper Tool

CSS would eventually supply a value meant exactly for this case. display: flow-root was introduced to create a BFC without any side effects on overflow or scrolls. You drop it onto the element whose children include floats, and the floats are contained.

Of the three approaches, this is the most direct. Clearfix requires a pseudo-element. Overflow repurposes an unrelated property. flow-root exists to establish a block formatting context on the element. It does the job with no extra moving parts.

What to Take Away

Floats are not going to vanish from existing codebases any time soon. Knowing how a BFC works — and how to produce one on purpose — is what separates getting a float layout to cooperate from debugging it blindly. The mental model is simple: a float introduces its own BFC, and containing it requires you to create a BFC on its parent.

That said, reaching for a float should prompt a quick sanity check about your intentions. A float is a legitimate answer for embedding media inside a paragraph, including its natural wrapping behavior. If your design calls for two items side by side, floats are the wrong question; Flexbox or Grid are the designed, maintainable solutions. The best float fix is often not using floats at all.