Uso de la propiedad float

Vamos a ver una propiedad CSS muy interesante que se ha usado muchísimo en el desarrollo web para conseguir diseños con contenidos en columnas. O de manera más general, para conseguir colocar elementos de bloque uno al lado de otro.

Se trata de la propiedad float, que como indica su nombre, permite que los elementos "floten" en el diseño modificando su posición predeterminada en el flujo del documento.

Sus valores posibles son left, right, none y diferentes variaciones sobre estos. Y básicamente significan que los elementos se apilen a la izquierda unos de otros, a la derecha, o que no lo hagan (comportamiento predeterminado de HTML).

Comportamiento predeterminado de los bloques

En este div incluimos algo de texto para comprobar como la altura del div es calculada por el navegador, en función de su contenido.
Al redimensionar la ventana del navegador y hacerla más pequeña, vemos como el div va cambiando de altura para conseguir que todo el contenido quede dentro de él. Este comportamiento deja de funcionar en el momento en que asignamos un valor de altura al contenedor.
Texto de relleno:
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Texto alrededor de las imágenes

Las imágenes son elementos en línea, eso quiere decir que si combinamos en un mismo contenedor texto, dentro de un elemento <p> por ejemplo, y una imagen, esta aparecerá en la misma línea de texto, junto a él. Pero eso no quiere decir que todo el texto rodee la imagen, sino que sólo la línea donde se encuentra la imagen está junto a ella.

Para solucionarlo solamente tenemos que aplicar a la imagen la propiedad float: left; para que la imagen quede a la izquierda del contenedor y el texto se quede pegado al lado derecho de la imagen, rodeándola por completo. Si queremos que quede igual pero por el lado izquierdo, aplicaremos float:right;

Cómo hacer un diseño en columnas

En este ejemplo vamos a ver cómo conseguir un efecto de columnas combinando bloques HTML. Se trata de aplicar a los elementos que queremos que queden uno al lado de otro la propiedad CSS float, que permite que un bloque quede al lado de otro siempre y cuando sus anchuras respectivas lo permitan. Es decir, la suma de las anchuras de todos los elementos que floten (y sus márgenes si los tienen) no puede ser superior al 100% del contenedor. Porque en ese caso los elementos que sobrepasan esa anchura caen debajo en la siguiente línea libre.

El principal inconveniente que tiene este método es que los elementos flotantes pierden la información de su altura de caja, y por lo tanto el navegador le asigna al contenedor de estos elementos una altura igual a cero. Eso, entre otras cosas, provoca que los elementos que se encuentran debajo del contenedor de las columnas en el html, suban y se "cuelen" entre los huecos de los elementos de las columnas.

Para solucionarlo, tenemos que forzar que el navegador calcule la altura del elemento que contiene las columnas. A día de hoy la forma más sencilla de conseguirlo es declarando en su CSS la propiedad overflow con cualquier valor, aunque el que menos interferirá en nuestro diseño suele ser auto.

Ejemplo

Título del Sitio

Columna izquierda

Esta columna y la derecha miden un 20% del contenedor. La columna central mide un 58% y tiene un margen izquierdo y derecho de 1%.
20% + 1% + 48% +1% + 30% = 100%

Cuerpo central

HTML del ejemplo

<div class="cont-ejem">
	<header class="cab-ejem">
		<h3>Título del Sitio</h3>
	</header>
	<section class="centro-ejem">
		<section class="columna" id="col_izq">
			<h4>Columna izquierda</h4>
		</section>
		<main class="columna" id="col_cent">
			<h4>Cuerpo central</h4>
		</main>
		<section class="columna" id="col_dcha">
			<h4>Columna derecha</h4>
		</section>
	</section>
	<footer class="pie-ejem">
		<h4>Zona pie de página</h4>
	</footer>
</div>
			

Columna derecha

CSS del Ejemplo

.cont-ejem {
border: 1px solid cadetblue;
}
.cab-ejem {
background-color: blanchedalmond;
padding: 2rem;
}
.centro-ejem {
background-color: aliceblue;
overflow: auto;
padding: 1rem;
}
.pie-ejem {
background-color: beige;
padding: 1rem;
margin: 1rem 0;
}
.columna {
border: 1px solid;
float: left;
padding: 1rem;
min-height: 700px;
background-color: whitesmoke;
width: 20%;
}
#col_dcha {
width: 30%;
}
#col_cent {
width: 48%;
margin: 0 1%;
}