Floats
Originalmente pensada para flotar imágenes dentro de bloques de texto, la propiedad float se convirtió en una de las herramientas más usadas para crear diseños multicolumna en las páginas web. Con la llegada de Flexbox y Grid ha vuelto ahora a su propósito original, como se explica en este artículo.
| Requisitos previos: | HTML básico (ver Introducción al HTML), y una idea de Cómo funciona CSS (ver Introducción a CSS.) |
|---|---|
| Objetivo: | Aprender a crear elementos flotantes en páginas web, y a usar la propiedad clear y otros métodos para limpiar los elementos flotantes. |
La historia de los elementos flotantes
La propiedad float fue introducida para permitir a los desarrolladores implementar diseños sencillos que incluyeran una imagen flotando dentro de una columna de texto, con el texto envolviendo la parte izquierda o derecha de la imagen. El tipo de cosa que encuentras habitualmente en el diseño de un periódico.
Pero los desarrolladores web pronto se dieron cuenta de que podían flotar cualquier cosa, no solo imágenes, por lo que su uso se extendió, por ejemplo creando efectos de diseño divertidos como estas letras capitulares.
Los elementos flotantes han sido usados comúnmente para crear diseños web completos con múltiples columnas situadas unas al lado de las otras (el comportamiento por defecto sería que las columnas se situaran unas debajo de las otras, en el mismo orden en el que aparecen en el código fuente). Ahora hay disponibles técnicas más modernas y mejores, que exploraremos más adelante en este módulo, por lo que el uso de float de este modo debería contemplarse como una técnica anticuada.
En este artículo nos centraremos en el uso apropiado de la propiedad float.
Un ejemplo de float simple
Exploremos cómo usar los float. Empezaremos con un ejemplo realmente simple que incluye un bloque de texto flotando alrededor de un elemento. Puedes acompañarnos creando un fichero index.html en tu ordenador, rellenándolo con una plantilla HTML simple, e insertando el código siguiente en los lugares adecuados. Al final de la sección podrás ver un ejemplo en vivo de cómo debería ser el código final.
Primero, empecemos con algo de HTML simple — añade lo siguiente al cuerpo de tu HTML, eliminando cualquier otra cosa que hubiera antes:
<h1>Ejemplo simple de caja flotante</h1>
<div class="box">Caja flotante</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
laoreet sit amet.
</p>
<p>
Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet
orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare
ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis
ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et
a urna. Ut id ornare felis, eget fermentum sapien.
</p>
<p>
Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
Ahora aplica el siguiente CSS a tu HTML (usando un elemento <style> o un <link> para separar el fichero .css — tú eliges):
body {
width: 90%;
max-width: 900px;
margin: 0 auto;
font:
0.9em/1.2 Arial,
Helvetica,
sans-serif;
}
.box {
width: 150px;
height: 100px;
border-radius: 5px;
background-color: rgb(207, 232, 220);
padding: 1em;
}
Si guardas y recargas la página, verás algo parecido a lo que esperarías: la caja se encuentra por encima del texto, en un flujo normal.
Flotar la caja
Para flotar la caja, añade las propiedades float y margin-right a la regla .box:
.box {
float: left;
margin-right: 15px;
width: 150px;
height: 100px;
border-radius: 5px;
background-color: rgb(207, 232, 220);
padding: 1em;
}
Ahora, si guardas y recargas, podrás ver algo parecido a lo siguiente:
Analicemos ahora cómo funciona el float — el elemento con el float aplicado (el elemento <div> en este caso) es sacado del flujo normal del documento y está pegado al lado izquierdo de su elemento contenedor padre (<body>, en este caso). Cualquier contenido que esté por debajo del elemento flotado en el flujo normal, ahora lo envolverá, rellenando el espacio a la derecha hasta la parte superior del elemento flotante. Allí se detendrá.
Flotar el contenido a la derecha tiene exactamente el mismo efecto, pero a la inversa — el elemento flotado se pegará a la derecha, y el contenido lo envolverá por la izquierda. Prueba cambiando el valor de la propiedad float a right y reemplaza margin-right con margin-left en el último conjunto de reglas para ver el resultado.
Visualizando el flotador
Si bien podemos agregar un margen al flotante para alejar el texto, no podemos agregar un margen al texto para alejarlo del flotante. Esto se debe a que un elemento flotante se saca del flujo normal y las cajas de los siguientes elementos siguen detrás del flotador. Puedes comprobarlo haciendo algunos cambios en tu ejemplo.
Añade una clase special al primer párrafo de texto, el que sucede inmediatamente a la caja flotante, y luego añade en tu CSS las siguientes reglas. Esto le dará al párrafo siguiente un color de fondo.
.special {
background-color: rgb(79, 185, 227);
padding: 10px;
color: #fff;
}
Para que el efecto sea más fácil de ver, cambia el margin-right de tu elemento flotante a margin, para obtener espacio alrededor del elemento flotante. Verás que el fondo del párrafo pasa justo por debajo de la caja flotante, como en el ejemplo inferior.
Los cuadros de línea de nuestro siguiente elemento se han acortado para que el texto discurra alrededor del flotador, pero debido a que el flotador se eliminó del flujo normal, el cuadro alrededor del párrafo aún permanece en ancho completo.
Limpiando floats
Hemos visto que el flotador se elimina del flujo normal y que otros elementos se mostrarán a su lado, por lo tanto, si queremos evitar que un elemento siguiente se mueva hacia arriba, debemos limpiar el float. Esto se logra con la propiedad clear.
En el HTML del ejemplo anterior, añade una clase cleared al segundo párrafo debajo del elemento flotante. Luego añade lo siguiente a tu CSS:
.cleared {
clear: left;
}
Deberías ver que el siguiente párrafo limpia el elemento flotante y ya no aparece junto a él. La propiedad clear acepta los siguientes valores:
left: limpia los elementos flotados a la izquierda.right: limpia los elementos flotados a la derecha.both: limpia cualquier elemento flotado, a la izquierda o a la derecha.
Limpiar las cajas envueltas alrededor de un float
Ahora ya sabes cómo limpiar un elemento que sigue a un elemento flotante, pero observa lo que sucede si tienes un flotante alto y un párrafo corto, con una caja envolviendo a ambos elementos.
El problema
Modifica tu documento para que el primer párrafo y el cuadro flotante estén envueltos por un <div> con una clase wrapper.
<div class="wrapper">
<div class="box">Caja flotante</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
aliquam dolor, eu lacinia lorem placerat vulputate.
</p>
</div>
En tu CSS, añade la siguiente regla para la clase .wrapper y después recarga la página:
.wrapper {
background-color: rgb(79, 185, 227);
padding: 10px;
color: #fff;
}
Además, elimina la clase .cleared anterior:
.cleared {
clear: left;
}
Verás que, como en el ejemplo en el que hemos puesto un color de fondo al párrafo, el color de fondo pasa por detrás del elemento flotante.
Una vez más, esto se debe a que el flotador se ha sacado del flujo normal. Limpiar el siguiente elemento no ayuda con este problema de limpieza de caja, donde queremos que la parte inferior de la caja envuelva el elemento flotante y envuelva el contenido incluso si el contenido es más corto. Hay tres formas posibles de lidiar con esto, dos que funcionan en todos los navegadores, pero tienen algo de truco, y una tercera, nueva forma de lidiar con esta situación correctamente.
El hack clearfix
La forma en que esta situación se ha tratado tradicionalmente es utilizando algo conocido como "truco clearfix". Esto implica insertar algún contenido generado después del cuadro que contiene el contenido flotante y envolvente, y configurarlo para limpiar ambos.
Añade el siguiente CSS al ejemplo:
.wrapper::after {
content: "";
clear: both;
display: block;
}
Ahora recarga la página y la caja debería limpiarse. Esto es básicamente lo mismo que si hubieras añadido un elemento HTML como un <div> debajo de los elementos y le hubieras añadido la propiedad clear: both.
Usando overflow
Un método alternativo es establecer la propiedad overflow del elemento envolvente con un valor distinto de visible.
Elimina el CSS clearfix que añadiste en la anterior sección y, en su lugar, añade overflow: auto a las reglas de la caja envolvente. De nuevo, la caja debería limpiarse.
.wrapper {
background-color: rgb(79, 185, 227);
padding: 10px;
color: #fff;
overflow: auto;
}
Este ejemplo funciona creando lo que se conoce como un block formatting context (BFC) o contexto de formato de bloque. Es como un pequeño diseño dentro de nuestra página dentro del cual todo está contenido, por lo tanto, nuestro elemento flotante está contenido dentro del BFC y el fondo se encuentra detrás de ambos elementos. Esto generalmente funcionará, sin embargo, en ciertos casos, es posible que encuentre barras de desplazamiento no deseadas o sombras recortadas debido a las consecuencias no deseadas del uso del desbordamiento..
display: flow-root
La manera moderna de resolver este problema es usar el valor flow-root de la propiedad display. Esto existe solo para crear un BFC sin usar hacks; no habrá consecuencias no deseadas cuando lo use. Elimina overflow: auto de la regla .wrapper y añade display: flow-root. Asumiendo que tu navegador sea compatible, la caja se limpiará.
.wrapper {
background-color: rgb(79, 185, 227);
padding: 10px;
color: #fff;
display: flow-root;
}
Resumen
Ahora ya sabes todo lo que tienes que saber sobre los flotadores en el desarrollo web moderno. Consulta el artículo sobre métodos de diseño anticuados para obtener información de cómo se solían usar, lo que puede serte útil si tienes que trabajar en proyectos antiguos.