Читать книгу El gran libro de HTML5, CSS3 y Javascript - Diego Gauchat Juan - Страница 73

Para finalizar la aplicación del modelo de caja tradicional, es necesario aplicar otra propiedad de CSS al elemento <footer> que le devuelva el flujo normal al documento y permita posicionar el pie bajo el último elemento en lugar de a su lado.

Código 2-38

Aplicar estilo al elemento <footer> y recuperar el flujo normal.

El Código 2-38 declara un borde de 2 px en la parte superior del elemento <footer>, un margen interno (o relleno) de 20 px y centra el texto dentro del elemento. Además, se ha restaurado el flujo normal del documento con la propiedad clear, que simplemente limpia el área ocupada por el elemento para impedir que se ubique en una posición adyacente a una caja flotante. El valor habitual es both, que indica que ambos lados serán restaurados y el elemento recuperará el flujo habitual o, lo que es lo mismo, no será flotante. Para un elemento en bloque, esto significa que va a ser posicionado debajo del último elemento, en una nueva línea.

La propiedad clear también empuja los elementos verticalmente, haciendo que las cajas flotantes ocupen una superficie real en la pantalla. Sin esta propiedad, el navegador muestra el documento como si los elementos flotantes no existieran y las cajas se superpusieran. Al posicionar las cajas una junto a la otra según el Modelo de caja tradicional, se hace indispensable el uso del estilo clear: both para poder colocar otras cajas debajo. La Figura 2-2 muestra una representación visual de este modelo con los estilos CSS básicos necesarios para crear el diseño.

Figura 2-2

Representación visual del modelo de caja tradicional.

Los valores left y right para la propiedad float no indican necesariamente que la caja estará a la izquierda o la derecha de la ventana. Estos valores hacen que sea flotante específicamente el lado indicado del elemento y rompen de este modo el flujo normal del documento. Si el valor es left, por ejemplo, el navegador intentará ubicar el elemento en el lado izquierdo del espacio disponible. Si no hay espacio disponible al lado del elemento anterior, el nuevo elemento se ubicará a su derecha, porque la propiedad float le ha sido aplicada al lado izquierdo del elemento.

Tenga esto en cuenta cuando quiera crear un diseño con varias columnas. Deberá aplicar a cada columna la propiedad float con un valor left para garantizar que cada una sea colocada al lado de la anterior en el orden correcto, flotando hacia la izquierda hasta que alguna sea bloqueada por otra columna o por el borde del contenedor. De este modo las cajas se ubicarán alineadas una junto a la otra, creando un conjunto de columnas en pantalla.