Make Parent div expand to content

If you are new to CSS(or maybe  not) you would have encountered a problem where a Parent div containing floated elements does not expand to height of child elements.

There are couple of solutions for this problem

  • Using an empty Div with clear:both  : Non semantic  way
  • Putting couple of  <br> :  again non semantic way
  • Using div with  overflow:hidden or auto  Semantic way if not using another div

but the modern and more semantic approach is to use Pseudo element :after

Either you can assign .clearfix to a div or just add CSS with div-class- name:after with the above code