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

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%;
}

  
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.
  
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.