Al aplicar margin-top a header también se desplaza la capa que lo rodea

[almez]

Mi duda es la siguiente...

En esta sencilla estructutura de ejemplo cuando en el div cabeza se aplica un margin-top también se desplaza el div total hacia abajo.

Cuando al div total le aplicas overflow:hidden, funciona correctamente. Es decir solo se le aplica el magin-top a la capa cabeza.

¿Porque sucede?

He añadido el css en linea sólo para mostrarlo aquí.
-------------------------------------------------------------------------------------------------------
<div id="total" style="background-color:#636; overflow:hidden"><!--total-->
<div id="contenedor" style="background-color:#396; width:950px; margin:auto"><!--contenedor-->


<div id="cabeza" style="background-color:#903; height:50px; margin-top:100px"><!--cabeza-->
cabeza
</div><!--fin cabeza-->
<div id="contenido" style="background-color:#FC0; height:200px;"><!--contenido-->
contenido
</div><!--fin contenido-->
<div id="pie" style="background-color:#03C; height:50px"><!--pie-->
pie
</div><!--fin pie-->



</div><!--fin contenedor-->
</div><!--fin total-->
------------------------------------------------------------------------------------------------

Gracias.

[GAST0N]

y si le agregas position relative , al div cabeza , de esa forma haria margin top a su contenedor, que en este caso, es el div contenedor

[almez]

Gracias Amigo Gaston

Con el position relative en el div cabeza sucede el mismo error.
Lo resuelve añadiendo el overflow:hidden en el div total.

Mi duda es porque hay que añadir esta opción(overflow:hidden) cuando lo logico sería que si aplico un margin-top al div cabeza este se debería solo aplicar al div cabeza y sin embargo arrastra hacia abajo al div total y a todo lo que hay en su interior.

Gracias