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 millenia, the CSS float property saw growing browser support and was starting 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 proved to 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
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.