Hola
La capa sale de su contenedora porque eso es exactamente lo que implica la propiedad float, tal como lo puedes leer
en su definición.
Los objetos "flotados", salen del flujo normal de la página y por lo tanto no siguen las reglas de posicionamiento implícito referente a los otros elementos.
Sobre las dimensiones de sus contenedoras, ahí tenemos otro problema y es la aplicación de la propiedad height. Es un poco complicado explicar porque en unos funciona de una manera y en otros de otra, pero resumiendo mucho la situación, esto viene dado por las herencias de ciertas propiedades, el considerar o no al objeto html como de bloque o no, considerar al body como de bloque o no y la semántica que determina que es 100% de altura.
Esta puede ser una buena estructura básica para que practiques:
Te sugiero que hagas un diseño sencillo de prueba hasta que te familiarices con los comportamientos del float y las dimensiones,
Código HTML:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<style type="text/css">
* {border: 0; margin: 0; padding: 0;}
html,body { width: 100%; height: 100%; background-color: #ccc; }
#Base { width: 100%; background-color: inherit; border: 1px solid #f00;}
</style>
<title>Pruebilla</title>
</head>
<body>
<div id="Base">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</body>
</html> Como puedes ver, es un documento vacío con una única capa y un borde para que la veas bien.
Felicidad