How to make a div grow in height while having floats inside

Question

How can I make a div grow its height when it has floats inside of it? I know that defining a value for the width and setting overflow to hidden works. The problem is that I

Answer 1

In many cases, overflow: auto; will be enough, but for the sake of completion and cross browser support, have a look at Clearfix which will do the job for all browsers.

Lets consider the following markup..

   
Content 1
   
Content 2

Along with the following styles..

.content { float:left; }

.clearfix { ..from link.. }

Without the clearfix, the parent div wouldn't have a height due to it's floating children. The clearfix will make the parent consider the floating children.