CSS Clearfix Demystified

micro clearfix

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

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

.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }
.cf { zoom: 1; }
  1. no clearing
  2. clear:both markup
  3. clearfix
  4. micro clearfix