History
In the early days of HTML and stretching into the late 1990s, developers primarily relied on tables to design complex or grid-based layouts. While this was considered an acceptable practice at the time, it often proved to be intricate and tedious work. Tables were often bloated to span dozens and dozens of rows, each with their own amalgamation of split and merged cells.
Browsers eventually began to introduce support for 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.
In the early 2000s, the CSS float property saw growing browser support and began to be used in the design of columns and intricate designs. As this was several years prior to the inception and adoption of modern attributes like grid or flex, the floating of elements became the standard 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.
The original utility class method
In the early days, the most common way to clear floats was to use a utility class, often simply named "clear." This class had the property of clear: both and was typically styled 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. This ensures the container wraps around its floated children. Some developers used overflow: hidden instead, depending on the layout needs.
<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, even when its floated children would otherwise not expand its height.
.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. Remember to clear floated elements to ensure surrounding content returns to the normal document flow.