Why is the parent div height zero when it has floated children?

html

responsive-design

best-practices

floats

byAnton Shumikhin·Oct 12, 2024

The parent div collapses in height because floated children are taken "out of flow", not affecting the container's dimensions. Use the common clearfix hack by adding .clearfix::after with content, clear, and display properties to give the parent a sense of its children's physical space:

.clearfix::after {
  content: "";
  clear: both;  /* Like cleaning up toys after playtime */
  display: block;  /* Putting an invisible lid on the parent */
}

Include .clearfix class in the parent div to encapsulate floated children:

<div class="clearfix">
  <div style="float: left;">I'm a free floater!</div>
</div>

Ah, the parent div now has its dimension back, embracing its charming floating children.

Floats and their containment techniques

Block formatting context to the rescue

Block formatting context provides a handy solution to handle those troublesome floating elements. The simple addition of overflow: hidden, display: inline-block, or display: flow-root keeps those unruly floaters in check:

.parent {
  overflow: hidden; /* Ventilation for parent */
  display: inline-block; /* Contain floats, and make friends with siblings */
  display: flow-root; /* The sheriff in town for containments */
}

The impact of the non-floating content

Even if it's a mere pseudo-element or an HTML character, any non-floating content has the strange power to force the parent div to look after all its children, floated or otherwise:

Nuances and variations of clearfix

Clearfix doesn't have to be grumpy and hacky. Now, it's calmer and kinder thanks to modern CSS properties like display: flow-root. Do remember to consult the compatibility chart before use.

In-depth exploration

Historical undertones and float specifications

CSS was intricately woven to treat floated elements as ephemeral, hence understanding float containment is crucial to mastering layout manipulation.

Modern alternatives

Say no to float-induced headaches! Embrace modern CSS layout techniques like Flexbox and Grid for easy-peasy lemon-squeezy designs.

Beware of the float woes

PSA: overflow: hidden is not your fairy godmother. It may clip your content, really an evil stepmother in disguise.

Preserving sanity with best practices

When floats go haywire, step up and clear floats—the proven patterns are here for you.
Structure your CSS to isolate float logic, avoiding surprise jump scares.
Flexbox and Grid offer clean layout solutions—let's give those floaters a break!
Understand your use-case before applying any techniques—every solution has its own set of perks and quirks.