La propiedad float especifica si un elemento ‘flota’ o no, si flota hacia la derecha o hacia la izquierda, se usa mayormente para poner dos elementos lado a lado.
Puede tener los siguientes valores:
float:right; /* Hacia la derecha */ float:left; /* Hacia la izquierda */ float:none; /* Hacia ningun lado, este es el valor por defecto. */ float:inherit; /* Hereda la direccion del elemento padre. */
Ejemplo
Teniendo en cuenta esto, haremos un ejemplo:
<style>
.caja1, .caja2 {
height:400px;
width:400px;
}
.caja1 {
background-color:#FE9B9B;
float:left;
}
.caja2 {
background-color:#A9ED86;
float:right;
}
.contenedor {
background-color:#666666;
margin:0 auto;
padding:10px;
width:900px;
}
</style>
<div class="contenedor">
<div class="caja1"></div>
<div class="caja2"></div>
</div>
Trabajaremos con 3 divs, uno para el contenedor y dos mas para que sirvan de las cajas que van a ser ‘flotantes’.
El Resultado
Pero vemos que el contenedor de atras no luce tan bien, y es porque float hace que los elementos floten y pierden su altura, en consecuencia el .contenedor tambien pierde la altura, para solucionar esto podemos definir una altura predeterminada para el contenedor (el inconveniente es que al definir una altura predeterminada esta es estática si hay mas elementos no va a aumentar por si sola) o podemos usar un div con la propiedad clear: both; que lo que hara es ‘limpiar’ ambos lados (left/right).
Veamos que pasa si le agregamos lo siguiente antes de cerrar el div de contenedor:
<div style="clear:both;"></div>
Utilizamos estilización en linea para hacerlo mas rápido, y el resultado ahora es:
¿Qué mas se puede hacer con esto?
Casi todas las paginas en internet usan estas propiedades, en este segundo y mas complejo ejemplo vamos a estructurar una pagina usando float y clear, creamos otro archivo con el siguiente codigo:
<style>
.contenedor {
background-color:#666666;
margin:0 auto;
padding:10px;
width:960px;
}
.contenido {
background-color:#FE9B9B;
float:left;
height:600px;
width:650px;
}
.barra {
background-color:#A9ED86;
float:right;
height:600px;
width:310px;
}
.pie {
background-color:#FEF6B2;
clear:both;
height:120px;
}
</style>
<div class="contenedor">
<div class="contenido"></div>
<div class="barra"></div>
<div class="pie"></div>
</div>
El Resultado:
Ya desde aqui puedes ir jugando y poco a poco armar tu pagina web, si tienes problemas con el texto, padding, etc, hechale un vistazo a este post.
Espero os haya servido de ayuda este tutorial, si tenéis alguna duda hazmela saber en los comentarios.