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

Question

overflow:auto; on the containing div makes everything inside of it (even floated items) visible and the outer div fully wraps around them. See this example:

.wrap {
  padding: 1em;
  overflow: auto;
  background: silver;
 }
 
.float {
  float: left;
  width: 40%;
  background: white;
  margin: 0 1%;
}

<div class="wrap">
  <div class="float">Cras mattis iudicium purus sit amet fermentum. At nos hinc posthac, sitientis piros Afros. Qui ipsorum lingua Celtae, nostra Galli appellantur. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Ambitioni dedisse scripsisse iudicaretur.</div>
  <div class="float">Mercedem aut nummos unde unde extricat, amaras. A communi observantia non est recedendum. Quisque ut dolor gravida, placerat libero vel, euismod. Paullum deliquit, ponderibus modulisque suis ratio utitur.</div>
  </div>

There's more than one way to clear floats. You can check some here:
http://work.arounds.org/issue/3/clearing-floats/

E.g., clear:both might work for you

#element:after {
    content:"";
    clear:both;
    display:block;
}

#element { zoom: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..

<div class="clearfix">
   <div class="content">Content 1</div>
   <div class="content">Content 2</div>
</div>

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.

I figured that a great way to do it is setting display: table on the div.