I have encountered a at many places, but I am not aware why is it done? Can someone brief me on this, why it is used in
The Most common problems we face when we write the code with float based layouts is that the parent div container doesn't expand to the height of the child floating elements. The typical solution to fix this is by adding an element with clear float after the floating elements or adding a clearfix to the parent div.
I am giving you some two good examples for better understanding about clearing floats :-
http://webdesignerwall.com/tutorials/css-clearing-floats-with-overflow
http://www.quirksmode.org/css/clearing.html