As coders and programmers in the generation of CSS Flexbox and CSS Grid, we don’t often consider CSS Clearfix. CSS Flexbox and Grid solve the position of elements a little better (and a little easier!) than using floats.
Nevertheless, we should all still be aware of this for those few instances where we are working with legacy code that uses floats and there isn’t time or money to switch to a more modern handling of the codebase.
In this article, we’ll explore the clearfix hack and discuss display: flow-root as a newer replacement of the clearfix solution.
What is a Float?
As a reminder, the float property basically takes the element you want to float and puts it to the left or the right of its container:
<!DOCTYPE html>
<html lang="en>
<head>
<title>CSS Clearfix</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: grey;
}
ul {
max-width: 800px;
width: 100%;
background: lightblue;
border: 5px double black;
padding: 20px;
}
img {
width: 300px;
margin: 20px;
}
li {
list-style: none;
float: left;
}
</style>
</head>
<body>
<!-- https://unsplash.com/photos/2PPjq7I3bs4 -->
<ul>
<li>
<img src="https://images.unsplash.com/photo-1567268377583-d1aaf9ccfc22?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3300&q=80" /> </li>
<!-- https://unsplash.com/photos/vYhBeZ_G_xE -->
<li>
<img src="https://images.unsplash.com/photo-1592283338081-beb63fa6a156?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1850&q=80" /> </li>
<!-- https://unsplash.com/photos/7UduWMpT618 -->
<li>
<img src="https://images.unsplash.com/photo-1583513702439-2e611c58e93d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3298&q=80" /> </li>
<!-- https://unsplash.com/photos/Ah_QC2v2alE -->
<li>
<img src="https://images.unsplash.com/photo-1552944150-6dd1180e5999?ixlib=rb-1.2.1&auto=format&fit=crop&w=1850&q=80" />
</li>
<!-- https://unsplash.com/photos/T-0EW-SEbsE -->
<li>
<img src="https://images.unsplash.com/photo-1548199973-03cce0bbc87b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" /> </li>
</ul>
<p>Here is a sample paragraph element. Something is wrong about where I am in the layout. What else is wrong with the layout?</p>
</body>
</html>
At this moment, there are some images that are supposed to be in a <ul>, the container that has a light blue background, but those images are taller than the other elements of the <ul>. This results in an overflow that doesn’t clear the float and collapsed horizontal margins.
This is why the light blue container is so short, why the floats are placed where they are and why we have a paragraph element side-by-side with the float elements. This is the default value when using float with child elements that are taller than the parent container.
The Fix
The first possible solution is what is called the clearfix hack. This hack inserts some empty content after the parent container so it expands to include the floated elements. We will use the pseudo-element ::after to achieve this:
<!DOCTYPE html>
<html lang="en>
<head>
<title>CSS Clearfix</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: grey;
}
ul {
max-width: 800px;
width: 100%;
background: lightblue;
border: 5px double black;
padding: 20px;
}
img {
width: 300px;
}
li {
list-style: none;
float: left;
margin: 20px;
}
.clearfix-hack::after {
content: " ";
clear: both;
display: table;
}
</style>
</head>
<body>
<!-- https://unsplash.com/photos/2PPjq7I3bs4 -->
<ul>
<li>
<img src="https://images.unsplash.com/photo-1567268377583-d1aaf9ccfc22?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3300&q=80" /> </li>
<!-- https://unsplash.com/photos/vYhBeZ_G_xE -->
<li>
<img src="https://images.unsplash.com/photo-1592283338081-beb63fa6a156?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1850&q=80" /> </li>
<!-- https://unsplash.com/photos/7UduWMpT618 -->
<li>
<img src="https://images.unsplash.com/photo-1583513702439-2e611c58e93d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3298&q=80" /> </li>
<!-- https://unsplash.com/photos/Ah_QC2v2alE -->
<li>
<img src="https://images.unsplash.com/photo-1552944150-6dd1180e5999?ixlib=rb-1.2.1&auto=format&fit=crop&w=1850&q=80" />
</li>
<!-- https://unsplash.com/photos/T-0EW-SEbsE -->
<li>
<img src="https://images.unsplash.com/photo-1548199973-03cce0bbc87b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" /> </li>
</ul>
<p>Here is a sample paragraph element. Something is wrong about where I am in the layout. What else is wrong with the layout?</p>
</body>
</html>
Aside from a little bit of margin I added to the <li> to make the spacing a better, all that was added was the .clearfix-hack::after selector. It takes three properties: content, display and clear.
An empty string occupies the value of the content property, we’re moving the border of the element below the end of both types of floats in the clear property and we are setting our display to block or table to present the data/images on the page.
This results in an acceptable display of images inside a container and <p> tag below it.
Is This the End for Clearfix?
With the advent of Flexbox and Grid, the need for clearfix is disappearing. Even more so with a newer way of handling clearfix in CSS:
.clearfix-hack {
display: flow-root
}
Replace the .clearfix-hack::after selector with the above code. Does anything change?
display: flow-root
Conclusion
We discussed two different ways to fix the bug that is created when we add the float property to a child element: the clearfix hack and using display: flow-root. More than likely, you will only ever be using these hacks on legacy code and not on any code you actually create from scratch because of the creation of Flexbox and Grid.
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
