Adding ClearFix Clear Float after div

I was interested in clearing floats and adding clearfix after a section of content.

Working on a website theme I was integrating the output from a plugin. The plugin had a wrapper div with a series of entries each in a div.

Shown below is the wrapper div with the two floating elements.

<div class="features">
    <div class="feature">example</div>
    <div class="feature">example</div>
</div>

It could easily be a series of images, each floating left against its neighbour.

For presentation I was using the floats left and right.

.testimonials:nth-child(2n){float:left;}
.features:nth-child(2n+1){float:right;}

After this section of content I wished to cancel the floats. Leaving the float active affected the following content layout. I would assign clear:both.

Utilising the plugin I did not wish to add an empty div after the section. This would mean adding the HTML code within the editor. I chose to use the after pseudo element.

Given below is the clearfix equivalent added to the content wrapper.

.feature::after{
	content: " ";
	visibility: hidden;
	display: block;
	height: 0;
	clear: both;
}

So there you have, a clearfix equivalent added to a wrapper div utilising the after pseudo element to save adding an extra empty div.