CSS Floats & Clears: Text Wrapping and Clearing Collapsed Parents

Master CSS floats and clears. Learn how to float elements, wrap text, resolve parent container collapses, and implement the clearfix hack.

Introduction

Before modern layout engines like Flexbox and CSS Grid existed, developers used the float property to structure page layouts. While originally designed to wrap text around images (similar to print newspapers), it was repurposed to build sidebars, grids, and multi-column web pages.

Repurposing floats for layout design came with challenges. Floated elements are removed from the normal document flow, which can cause parent containers to collapse to zero height, breaking backgrounds and borders. While modern layouts rely on Flexbox and Grid, understanding floats, clear properties, and the clearfix hack is a core debugging skill and a common topic in frontend placement interviews.

What You Will Learn

  • How the float property shifts elements.
  • Wrapping text around floating images.
  • The parent container collapse bug caused by floats.
  • Using the clear property to restore page flow.
  • Implementing the standard .clearfix utility.

Prerequisites

Detailed Explanation: The Float Property

The float property moves an element to the left or right of its parent container, allowing inline text and other elements to wrap around it.

Float Property Values:

  • left: Shiffs the element to the left edge of its container. Surrounding content flows down the right side.
  • right: Shifts the element to the right edge of its container. Surrounding content flows down the left side.
  • none: (Default) The element does not float and renders in its normal place in the document flow.
.article-thumbnail {
  float: left;
  margin-right: 16px;
}

The Parent Container Collapse Bug

Because floated elements are removed from the normal layout flow, they do not contribute to the height of their parent container.

If a parent element contains only floated children, the parent's height collapses to 0px. This causes parent backgrounds to disappear and forces subsequent elements on the page to slide underneath the floated elements, breaking the layout.

Collapsed Parent:
+---------------------------------------+ (Height collapses to 0px!)
|                                       |
+---------------------------------------+
  [ Floated Left ]    [ Floated Right ]   <- Float elements overflow container!

The Solution: Clear and Clearfix

To resolve layout breaks caused by floats, you must instruct subsequent elements to wait until the floats are finished before rendering.

1. The Clear Property (clear)

The clear property controls which sides of an element floating elements are not allowed to sit on:

  • left: The element is pushed below any left-floating elements.
  • right: The element is pushed below any right-floating elements.
  • both: The element is pushed below all floating elements.
.footer {
  clear: both; /* Restores normal document flow */
}

2. The Clearfix Hack

If you don't have a natural footer element to clear, you can apply the clearfix hack to the parent container. This uses the ::after pseudo-element to create an invisible block that clears the floats automatically:

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Add the clearfix class to any parent element wrapping floated child elements:

<div class="card-wrapper clearfix">
  <div class="card-left">Floated element</div>
  <div class="card-right">Floated element</div>
</div>

Visual Learning Diagram (Mermaid)

graph TD
    subgraph Float Layout Resolution
    ParentCollapse[1. Floats only <br> Parent height collapses to 0px] --> Clearfix[2. Apply Clearfix to Parent]
    Clearfix --> InvisibleBlock[3. ::after pseudo-element creates clear:both block]
    InvisibleBlock --> RestoredFlow[4. Parent expands to wrap floats]
    end

Code Examples

Example 1: Classic Newspaper Image Wrap

Wrap text around an article thumbnail:

.article-container {
  width: 100%;
  max-width: 600px;
}

.float-img {
  float: left;
  width: 150px;
  height: 150px;
  margin-right: 20px;
  margin-bottom: 10px;
  border-radius: 8px;
}

.article-text {
  font-size: 16px;
  line-height: 1.5;
  /* Text wraps around the floated image automatically */
}

Example 2: Simple Multi-Column Layout (Legacy Grid)

Build a two-column layout with a sidebar using float and clearfix:

.main-wrapper {
  max-width: 1000px;
  margin: 0 auto;
}

/* Clearfix wrapper for floating columns */
.main-wrapper::after {
  content: "";
  display: table;
  clear: both;
}

.main-content {
  width: 70%;
  float: left;
  padding: 20px;
}

.sidebar {
  width: 30%;
  float: right;
  background-color: #f8fafc;
  padding: 20px;
}

Best Practices & Common Mistakes

  • Do Not Use Floats for Page Layouts: Avoid building modern website grids or columns using floats. Floats are difficult to manage and lack features like vertical centering. Use Flexbox or CSS Grid instead.
  • Float and Widths: A floated block-level element collapses to fit the width of its content unless an explicit width is declared. Always declare a width on floated elements to prevent sizing bugs.

FAQs

Q: What is the modern alternative to the clearfix hack? A: You can use overflow: auto; or display: flow-root; on the parent container. Both properties create a new block formatting context (BFC) that wraps floated elements automatically without pseudo-elements.

Q: Can inline elements float? A: Yes. When you apply float to an inline element (like a <span> or <a>), the browser automatically converts its display value to block, allowing you to set width and height dimensions.

Summary

CSS floats move layout elements horizontally to wrap text blocks. Because floats break parent container flows, parent heights collapse. This collapse can be resolved using the clear property on subsequent elements or applying the ::after clearfix utility class to the parent.

Related Articles

Next Tutorial

Now that we understand traditional document positioning, let's explore modern layout engines. Let's check: Introduction to Flexbox.

← Back to Syllabus