Clearfix for floating elements

When you have child elements that are floated and the parent element is failing to wrap the child elements content.
In other words clearfix is a way to combat the zero-height container problem for floated elements.
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.clearfix {
  display: inline-block;
}