mantener el tamaño de una capa al flotar sus capas interiores

[roboty]

Hola tengo una consulta de concepto sobre la propiedad float que me surge un problema y no se a que es debido, si tengo una caja por ejemplo de 100% de ancho y un alto de 50px y dentro quiero colocar tres cajas que floten a la izquierda quedando en linea por ejemplo que cada caja mida 33% de ancho y un alto de 20px.

hasta aqui bien pero el problema que tengo es que quiero mantener el alto de la caja principal osea los 50px, es decir que si la caja principal es roja como color de fondo se tiene que seguir biendo pero no es asin como lo podria conseguir yo hice algo asin:

Código HTML:

<div id="caja-principal">
    <div id="uno"></div>
    <div id="dos"></div>
    <div id="tres"></div>
</div>
 

esto el css

Código CSS:

<style>    
#principal{
   width:100%;
   background-color:yellow;
}
#principal div{
    float:left;
}
#uno{
    width:33%;
    height:30px;
    background-color:blue;
    margin:10px;
}
#dos{
    width:33%;
    height:30px;
    background-color:green;
    margin:10px;
}
#tres{
    width:33%;
    height:30px;
    background-color:black;
    margin:10px;
}
</style>
 

no lo probe pero como ejemplo vale, el div principal quiero que se vea su color amarillo que tendria que verse alrededor ya que los otros div hijos de este le di un margen de 10 px pero no se ve alguna idea para solucionar esto? y por que pasa?

modifico para comentar que lo que no quiero es darle una altura fija a la caja principal si no que esta tenga la altura dependiendo de su interior.

Saludos.