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.
