Elementos flotantes

A diferencia de html, css permite un buen control sobre el posicionamiento de elementos. Los elementos en una página web fluyen en el orden en que aparecen. Por lo tanto, los elementos aparecen a medida que se desplaza por la pagina html.

Utilizando la propiedad float de css es posible romper ese flujo normal. Dicha propiedad admite tres valores: right, left y none.

Un valor left significa que el elemento formará un bloque que se situará a la izquierda de los elementos adyacentes. Un valor right significa que el bloque se situará a la derecha.

Al crear un elemento flotante, el navegador sitúa a los elementos que se encuentran a continuación al lado de este mientras haya espacio aunque no pertenezca al mismo bloque. Para impedir que esto ocurra es necesario que la flotación se interrumpa. La propiedad clear hace que el elemento definido con esta propiedad no tenga elementos flotantes a su lado. Podemos especificar si queremos que no haya elementos flotantes a la izquierda, a la derecha o en ambos lados. El valor típico es both que hace que no haya elementos flotantes ni a su derecha ni a su izquierda.

Los únicos valores posibles para float son “left”, “right” y “none”. No se puede centrar un objeto utilizando esta propiedad.

Continuando con nuestro ejercicio ahora trabajaremos con los elementos flotantes para armar las columnas de nuestra página:

body {
    font-family:Verdana, Arial, Helvetica, sans-serif;
}

    
#wrapper {
    width: 960px;
}

    
header {
height: 130px;
background-color:#FFCC33;
}

    
aside {
    width: 360px;
    height: 400px;
    float: left;
    background-color:#47697E;
}

    
#content {
    width: 600px;
    height: 400px;
    float: right;
    background-color:#FF3366;
}

    
footer {
    height: 50px;
    clear: both;
    background-color:#FCF1D1;
}

Limpiar FLOATS con la propiedad OVERFLOW

Uno de los problemas comunes es que cuando usamos un contenedor que incluye elementos flotantes no se expande a la altura deseada, es decir se queda con un tamaño menor y no crece hacia abajo lo suficiente para que las capas flotantes quepan en el. Una solución consiste en añadir un elemento invisible después de todos los elementos posicionados de forma flotante para forzar que el elemento contenedor tenga la altura suficiente. La forma más fácil es agregar un div de esta forma:

<div style="clear:both"></div>

Sin embargo no es la solución más elegante. Para “limpiar los float” la técnica más usada es incorporar la propiedad overflow de CSS sobre el elemento contenedor:

#wrapper {
    width: 960px;
    overflow:hidden;
}

Ahora, el contenedor encierra correctamente a los demás elementos flotantes interiores y no es necesario añadir ningún elemento adicional en el código HTML.

<<< Archivo RESET - Prop. WIDTH y HEIGHT

El modelo de cajas >>>

<<< Ver índice - Maquetar Sitios Web