Floats and clears: a brief history of layout design before grid and flex

History

In the early days of HTML, stretching into the late 1990s, web developers relied on tables to create complex or grid-based layouts. While this was considered an acceptable practice at the time, it often proved to be intricate and tedious. Tables often bloated to dozens of rows, each containing their own amalgamation or division of cells.

Eventually, browsers began to support CSS which offered a clean separation between design and layout. As the web slowly transitioned away from table-based layouts, new techniques rose in popularity. By the year 2001 or so, float was added to the CSS spec and was generally well supported by most browsers. As this was several years prior to the inception and adoption of grid or flex layouts, floating elements continued to be the standard layout practice for several years.

What is a floated element?

A floated element is one that shifts to the left or right of its parent container, causing the following elements to wrap around the floated content until cleared.


						.content { float: left; width: 60%; margin-right: 10%; }

						.sidebar { float: right; width: 30%; }

By using opposing float values, elements can align side by side and create a grid-like layout, as illustrated below.

Clearing floats

When an element is floated, its parent does not expand to contain it. This can cause the floated element to overflow beyond the parent. When used with an empty container, the parent will effectively have a height value of "0" unless specified, until the float is cleared.

In the following illustration, the red line represents the border added to the parent container. Given that the container has no height, only the border is visible.

To mitigate this, the floated element needs to be cleared. Clearing the floated element allows its parent to expand with the contents, as illustrated below.

Original utility class method

Early on, the most popular method of clearing floats was to rely a utility class, often simply named "clear." This class had the property of clear: both and is set to be displayed as a block-level element. Initially, the display mode of table was preferred as it offered the most compatibility.


							div.clear { clear: both; display: table; }

The element was added after floated elements, delineating a stopping point. The technique could result in a lot of junk in the code when dealing with complex layouts.


							<div class="container">

								  <div class="content">My content</div>

								  <div class="sidebar">My menu</div>

								  <div class="clear"></div>

							</div>

Early CSS clearfix method

As support for CSS grew, pseudo-selectors like ::after were introduced, allowing a greater level of flexibility by populating the cleared content automatically.


							.clearfix::after { 

								  content: '';

								  clear: both;

								  display: block;

								  }

The class was appended to the floated element's container.


							<div class="clearfix">

									  <div class="content">My content</div>

									  <div class="sidebar">My menu</div>

							</div>

Modern overflow method

The modern solution is to utilize CSS' overflow property to force the parent into expanding with the contents of its child elements, despite its contents clipping out of the bounding box.


							.clearfix { overflow: auto; }

The class is appended to the floated element's container.


							<div class="clearfix">

									  <div class="content">My content</div>

									  <div class="sidebar">My menu</div>

							</div>

In closing

Floating elements for layout purposes was a popular practice in the early days of CSS, before the advent of grid and flex. To this day, when using a floated element, don't forget to clear it to allow the following content to return to the standard layout model.