Ho gia affrontato questa cosa diverse volte ma non mi ricordo mai da cosa dipende -.-'

Ho due box:

codice:
div#box_main {
  
  margin:0 0 0 190px ;
  border: 1px solid #c0c0c0;
  
  padding: 25px 25px 50px 10px;
  clear:right;
  background-color:#fff;

}

.tpl_selection {
  
  width: 150px;
  height: 150px;
  border: 1px solid black;
  margin: 10px 10px 10px 0;
  float:left;

}
Il codice HTML è questo.

codice:
<div id="box_main">
<div class="tpl_selection"></div>
<div class="tpl_selection"></div>
<div class="tpl_selection"></div>
</div>
Il risultato desiderato è che i quadrati definiti da tpl_selection siano disposti orizzontalmente all'interno di box_main. Questo in effetti avviene; solo che, essendo l'unico contenuto di div#box_main, hanno una altezza maggiore e 'strabordano', risultando in parte contenuti ed in parte fuori dal box contenitore.

Come mai?