CSS

clearfix css

.clearfix {
  content: "";
  clear: both;
  display: table;
}

css clearfix

/* add this class in a parent tag */
/* as of today, avoid using float layout better of use flexbox and grid */
/* but if you still use float layout restrict use this mechanism with
picture text blog like design */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

clearfix css

.clearfix:after {
clear: both;
content: " ";
display: block;
font-size: 0;
height: 0;
visibility: hidden;
}
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }