clearfix doesn't seem to be working - css

Question

Ok, I'm having some more fun with the ::after feature. Here are 2 examples:
With issue: http://codepen.io/anon/pen/zrBJRO
Works: http://codepen.io/anon/pen/LGZJQN
The first example, I am adding the .clearfix class to the div's I want to apply it to:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
However, this doesn't work - and the red bar (which should be showing under the 3rd .link-listing div), simply shows at the top of the page.
On the other hand, if you look at the 2nd example ( http://codepen.io/anon/pen/LGZJQN ) , you can see that this DOES work ... but I've had to go back to using horrible divs to clear them:
<div style="clear:both"></div>
The idea of this exercise, is to try and get rid of as many DOM elements as possible (each link we currently have 2 "clear" divs (sometimes 4, depending on if there is an "offer" on the listing as well), and when there are 50 links per page - thats a heck of a lot of DOM elements we can remove, if this will work :))

Answer 1

I think that the use of floats here is exagerated. Removing the floats you have the same behaviour and you don't need to put clearfixes anymore. Floats are for floating elements, not for layouts.
https://jsfiddle.net/j9oecqp3/
Simply change float for display block
.link-listing {
display:block; /* before was float:left;
}