Propiedad Float

Entramos en terreno un poco más complicado, pero trataré de explicar lo más sencillo posible.

Para cambiar el flujo natural de los Div, ocupamos la propiedad de flotación, esto rompe el flujo y podemos hacer que las cajas literalmente floten a la derecha o a la izquierda.

Esta técnica es esencial para comenzar a maquetar nuestro sitio web y veremos algunos ejemplos a continuación.

Ejemplo de posicionamiento float de una caja

Si a caja 1 se le aplica una flotación a la derecha, esta se posiciona lo más a la derecha posible, rompiendo el flujo tradicional, por lo tanto la caja 2 ocupa el lugar de la caja 1 originalmente.

Ejemplo de posicionamiento float de varias cajas

Cuando a las tres cajas se le aplica una flotación a la izquierda, estas se van posicionado una al lado de la otra lo más a la izquierda posible, generando así tres columnas.

Hasta aquí todo bonito pero existe un problema que no es fácil de explicar.

Ejemplo de posicionamiento float de una caja

En este ejemplo no se eliminó la caja 2, sino que esta por debajo de la caja 1, ¿por qué sucede esto? A la caja 1 se le aplicó una flotación a la izquierda, por lo tanto desaparece del flujo normal y la caja 2 ocupa el lugar de la caja 1. (este es un ejemplo donde todas las cajas tienen el mismo tamaño, es por esto que da el efecto que desapareció)

Para que esto no ocurra se tienen que limpiar las flotaciones, forzando a que un elemento no fluya alrededor de otro elemento posicionado mediante float.

La propiedad “clear” permite modificar el comportamiento por defecto del posicionamiento flotante para forzar a un elemento a mostrarse debajo de cualquier caja flotante.

Html

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Float</title>
	<link rel="stylesheet" href="caja-ejemplos.css" type="text/css">
</head>
<body>
<div class="caja-1">
	<p>caja-1</p>
</div>
<div class="caja-2">
	<p>caja-2</p>
</div>
<div class="caja-3">
	<p>caja-3</p>
</div>
</body>
</html>

Css

.caja-1{
	border: 2px #000 solid;
	width: 100px;
	height: 100px;
	margin: 10px 0;
	float: left;
}
.caja-2{
	border: 2px #000 solid;
	width: 100px;
	height: 100px;
	margin: 10px 0;
	clear: both;
}
.caja-3{
	border: 2px #000 solid;
	width: 100px;
	height: 100px;
	margin: 10px 0;
}

Aquí puedes ver como se aplicó la propiedad clear para limpiar las flotaciones. Este tema tiene para rato por lo tanto te invito a ver el video explicativo y en el siguiente apartado veremos un ejemplo práctico formando 3 columnas.