CSS Clearfix Demystified

clearfix

Float
Float
no added HTML is needed and this container now encloses all the floating blocks. Just add a class="clearfix"

Add the below CSS and add class="clearfix" to the container div.

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {display: inline-block;}  /* for IE/Mac */
  1. no clearing
  2. clear:both markup
  3. clearfix
  4. micro clearfix