Old School Layouts: The CSS Float Property

When the web was young, developers needed a way to create complex layouts. Before Flexbox and Grid, the primary tool for this was the **`float`** property. Originally introduced in CSS 2.1 to allow text to wrap around images (like in a newspaper), clever developers realized it could be used to build entire multi-column page structures.

Today, using `float` for page layout is considered a **legacy technique**. Modern tools are far more powerful, predictable, and flexible. However, you will still encounter `float` in older codebases, and it's still the correct tool for its original purpose: wrapping text around an element.

The Core Properties: `float` and `clear`

The `float` property accepts a few values, but the two you'll use are:

• float: left;: Takes the element out of the normal document flow and shifts it as far left as it can go in its container. Subsequent content will flow around its right side.
• float: right;: Does the same, but shifts the element to the far right. Subsequent content flows around its left side.

Live Example:

This text demonstrates the wrapping behavior. By applying `float: left` to the gray square, this paragraph text, which comes after it in the HTML, is forced to flow neatly around it. This is the primary and intended use case for the `float` property and is still perfectly valid today.

The Big Problem: The Collapsing Parent

The moment an element is floated, it is **removed from the normal document flow**. This means the parent container no longer "sees" its height. If a parent element contains *only* floated children, its height will collapse to zero, which can completely break your layout.

How to Fix It: Clearing Floats

To fix the collapsing parent, we must **clear** the floats. The `clear` property is applied to an element *after* the floats. It specifies that the element cannot be adjacent to a floated element.

• clear: left;: Moves the element below any left-floated elements.
• clear: right;: Moves the element below any right-floated elements.
• clear: both;: Moves the element below **all** floated elements. This is what you will use 99% of the time.

Solution 1: The Clearfix Hack (Modern)

This is the most common and robust solution. You add a CSS pseudo-element (`::after`) to the *parent container* to clear the floats internally.

.parent-container::after {
  content: "";
  display: block;
  clear: both;
}

Solution 2: The Block Formatting Context (BFC) Method

This is a more "hacky" but very common solution you'll see. Applying certain CSS properties to the parent container (like overflow: auto; or overflow: hidden;) creates a new **Block Formatting Context (BFC)**. A BFC is a mini-layout environment that knows how to contain its own floats.

.parent-container {
  overflow: auto; /* or overflow: hidden */
}

This works perfectly but can have side effects (like hiding shadows or creating unwanted scrollbars if not careful).

Key Takeaway: **Do not use `float` for page layout in 2025.** Use Flexbox for one-dimensional layouts (rows or columns) and Grid for two-dimensional layouts (rows *and* columns). Use `float` only for its original purpose: wrapping text around images or other inline elements.