Long, long ago (maybe some 8 or 9 years ago) I was still a desktop software developer and a totally newbie to web development. I then came across a little something called clearfix. I saw how overly used clearfix was back then - almost every website used an absurd abundance of these little divs with the clearfix class on them.
But what was it and why is it so important that a mammoth number of websites out there featured it and is it still a thing?
First off I'll answer the latter question first, yes it's still a thing.
Secondly, clearfix is designed to stop elements with a float property floating over a block element:
In this case, the footer is a block element and the picture of the motherboard is a floating element. Notice how it overlaps the footer.
To fix this, the footer is given the clear: both property.
Clearfix
So then you ask, what is clearfix?
Clearfix is, in a nutshell, a simple fix that stops things flowing without having to add clear: both to the following element. By taking advantage of CSS's pseudoselector :after, we can easily force any floating elements to be followed by an element with the clear property set correctly, we can stop the floating element floating over the element that follows it.
Do we still need it?
The answer to this is actually yes, for the most part. You see, backward compatibility will always be an issue that needs attention but also because the replacement isn't even all that great as of yet.
Normally, frameworks such as Girder, Bootstrap or Foundation will deal with the annoyingness of clearfix for you by adding it to classes such as the row (in Girder/Bootstrap) for you. So when you create two columns with the float property you wrap them in a row which features clearfix properties and stops the next content flying over the floating columns.
So clearfix is here to stay.
