Clearfix for floating elements

Age-old problem

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;

Result Box
  • html
  • css

Share This:

Feel free to leave a comment!

You might alos be interested in: