css
Código:
.clear { clear:both; height:0px; font-size:0px; }
html (trozo)
Código:
<div id="contenedor">
<h1>Prueba de CSS</h1>
<div class="capa">
<img src="0915701.jpg" alt=""/>
<img src="0915701.jpg" alt=""/>
<img src="0915701.jpg" alt=""/>
<img src="0915701.jpg" alt=""/>
<img src="0915701.jpg" alt=""/>
<img src="0915701.jpg" alt=""/>
<div class="clear"> </div>
</div>
Recapitulemos. Aplicando un float (left o right) a un elemento lo sacas del flujo de su contenedor, de forma que el próximo elemento, en lugar de "empezar" donde termina el anterior empieza a su misma altura (si puede).
En tu caso, no se aplicaba el margen superior porque éste tomaba la posición del DIV que contenía los elementos flotados. Al estar todo el contenido de ese DIV fuera de flujo, la altura del DIV es la de sus elementos no-flotados, que en tu caso era ninguno.
Añadiendo el DIV con la clase clear, cortas el flujo de floats de los elementos, de forma que el contenedor termina donde termina dicho DIV.
Suena confuso pero puedes probarlo muy fácilmente. Añade un borde a capa1 antes de poner el div clear y verás que no ocupa el alto de su contenido. Añade luego el div clear y verás como sí lo ocupa.