Hace años, los diseñadores de páginas web comenzaron la transición de la maquetación con tablas (actualmente casi abandonada y totalmente desaconsejada) a la maquetación con CSS.
Mientras que la maquetación con tablas resultaba más sencilla, la maquetación con CSS abrió un mundo de posibilidades nuevas que con el uso de las tablas son impracticables.
Una de las diferencias más notables es que para colocar un elemento junto a otro en el plano horizontal, con las tablas bastaba con colocar dos celdas adyacentes en una misma fila.
La forma de hacer lo mismo con CSS, es empleando la propiedad float.
En la actualidad, la propiedad float de CSS tiene una amplia aceptación y difusión, a tal punto que, la mayoría de los diseños web actuales serían imposibles de construir sin el uso de esta propiedad.
A pesar de que la propiedad float se basa en principios lógicos muy claros, emplearla en forma correcta requiere cierta práctica, dado que esta propiedad puede comportarse en forma variable de acuerdo al contexto en que se encuentren los elementos web sobre los que se aplica.
Definición y sintaxis de float
La propiedad float de CSS es la que permite que los elementos floten sobre el lado que se indica, mientras que el resto de los elementos que no tienen la propiedad float definida se encuentran alrededor.
De acuerdo a las normas de CSS2, los elementos flotantes pueden tener tres valores: left, right y none. El primero define que el elemento fluirá hacia la izquierda, el segundo a la derecha, mientras que el tercero quita la propiedad.
Por defecto, los elementos cuya propiedad float no se encuentra definida, es none.
Sintaxis:
float: left;
float: right;
float: none;
No todos los elementos son pasibles de incluir la propiedad float. Todos los que definen las propiedades del texto (span, strong, i, b, etc.), los saltos de línea (br), no permiten el uso de esta propiedad. Los elementos que sí soportan esta propiedad son las divisiones (div), imágenes (img), párrafos (p) y las listas (ul y ol).
La imagen anterior es una captura de pantalla de un diseño cuyo código es como sigue:
<head>
<style>
img {
float: left;
margin: 5px 10px 5px 0;
}
#caja {
width: 400px;
border: solid 1px #000;
background-color: #ccc;
padding: 5px;
font-family: arial;
}
</style>
</head>
<body>
<div id=”caja”>
<img src=”mundo.jpg” width=”200” height=”200” alt=”La Tierra” />
<p>Pellentesque habitant morbi tristique senectus et netus et.</p>
<p>Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</body>
El código CSS está en el <head>, y en el se detallan las características de los diferentes elementos que componen el ejemplo.
Como podemos ver, en este CSS se establece que las imágenes tendrán la propiedad float con un valor left, lo que, como vemos en la imagen, hace que la fotografía de la Tierra aparezca flotando a la izquierda, mientras que los demás elementos (texto dividido en dos párrafos), que no poseen esta propiedad, se encuentran distribuidos en torno a la misma.
Características de la propiedad CSS float
- Los elementos cuya propiedad float tengan el valor left, flotarán a la izquierda hasta el límite del elemento que los contenga o hasta el límite marcado por el padding del mismo. (Ver imagen de ejemplo)
- Si varios elementos flotantes exceden el ancho del contenedor, los elementos que no “quepan” se colocarán debajo, también volcados hacia el lado definido en el float.
- Los elementos de bloque que no tengan la propiedad float definida, se comportarán como si el elemento flotante no se encontrara allí, ya que el elemento flotante se encuentra fuera del flujo de los mismos.
Diseño de columnas empleando la propiedad float
Uno de los usos más frecuentes para la propiedad float, es el diseño de páginas web a dos o más columnas. A continuación veremos a grandes rasgos como se construye un diseño de este tipo.
<head>
<style>
#caja1 {
width: 190px;
border: solid 1px #000;
background-color: #ccc;
padding: 5px;
font-family: arial;
margin-right: 10px;
float:left;
}
#caja2 {
width: 320px;
border: solid 1px #00f;
background-color: #99f;
padding: 5px;
font-family: verdana;
float:left;
}
</style>
</head>
<body>
<div id=”caja1″>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada.</p>
</div>
<div id=”caja2″>
<p>Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</body>
Y el resultado es el siguiente:
En la imagen de ejemplo, se han empleado dos divisiones (div’s) cuya propiedad flotante tiene valor left, por lo que ambos div’s se vuelcan a la izquierda siguiendo la misma secuencia en que se encuentra el código HTML.
Factores relevantes sobre el uso de floats en el layout
Durante muchos años, el uso de la propiedad float para el posicionamiento de elementos dentro de un layout, ha representado uno de los mayores retos y dolores de cabeza para los diseñadores web que se han aventurado a utilizarla sin tener conocimiento exacto de su funcionamiento o correcta implementación.
Y no es para menos, puesto que al utilizar elementos posicionados mediante float de manera incorrecta, estos pueden causar grandes problemas de visibilidad y usabilidad a nuestros sitios, rompiendo muchas veces con el layout disponible y haciendo que trabajemos el doble con tal de lograr un comportamiento más o menos deseable.
El problema no radica en la propiedad en si, lo hace en la forma en que ésta es interpretada por los desarrolladores, diseñadores y alguno que otro navegador.
Por esta malinterpretación, su concepto es considerado algo tan escasamente intuitivo; sin embargo, si echamos un vistazo a su teoría y documentación veremos que no es algo realmente tan complejo como parece, ya que la mayoría de los problemas y bugs son producidos por versiones antiguas de navegadores, en su mayoría de Internet Explorer.
Puntos importantes sobre los elementos flotantes
- Para encontrar la razón por la que se dio el nacimiento de la propiedad float en CSS, nos tendríamos que remontar mucho tiempo atrás en la historia del Internet, al punto donde los desarrolladores web buscaron obtener la habilidad para mostrar un texto alrededor de las imágenes que se desplegaban en los navegadores.Dicha práctica llego a ser implementada a partir de Netscape 1.1 y tiempo después fue añadida al nuevo lenguaje de estilo al cual se le dio el nombre de CSS.
- El término “float” fue utilizado para describir la manera en que el elemento flota de un lado a otro, de arriba hacia abajo, al momento de poseer esta propiedad y sin necesidad de aplicar algo más que intervenga en su posición.Si bien su función se describe desde las primeras mejoras que se hicieron a la versión 2 del lenguaje HTML, fue hasta su implementación en CSS cuando empezó a tener un reconocimiento público y a la par de esto empezaron a surgir la mayoría de las malinterpretaciones de la propiedad.
- Una capa o caja que reciba la propiedad float tendrá un comportamiento especial, distinto al del resto de los elementos que son posicionados con otros métodos, puesto que al principio el elemento que cuente con esta propiedad si se posiciona como parte del flujo normal, pero en cierto punto se saca del flujo y se desplaza hacia la izquierda o derecha de nuestra página retirándose lo más posible.Cuando un elemento es retirado del flujo normal, todo el contenido que se encuentra dentro de ese flujo tiende a ignorar a dicho elemento por completo y por lo tanto no hace espacio para que sea ocupado por éste.
- Al momento de asignarle la propiedad float, el elemento se convierte en un bloque, en una caja la cual puede variar su posición oscilando de izquierda a derecha dependiendo del valor que reciba la propiedad. Las opciones en el marcado serían básicamente tres, “float: left”, “float right” o “float: none”, para dar un alineado a la izquierda, derecha o simplemente no dar la propiedad.
- Tenemos que recordar siempre dar un ancho a los elementos que reciban la propiedad, este debe ser especificado mediante la propiedad width, ya que en caso de no contar con esta medida los resultados al momento de aplicar float pueden resultar poco predecibles. Esta regla se puede romper en caso de que apliquemos la propiedad a una imagen que ya tiene un ancho implícito, pero si un elemento float no tiene un ancho explícito o implícito en sus propiedades, ocupará todo su bloque contenedor de manera horizontal, imitando el comportamiento de los elementos no flotantes y no dejando la posibilidad de que el resto del contenido lo rodee.
- A diferencia de las cajas en el flujo normal, los márgenes verticales de una caja flotante no se contraen con los márgenes de las cajas que se encuentran encima o debajo de ella. Además, una caja flotante puede superponer otras cajas a nivel de bloque adyacentes a ella en el flujo normal.
- Un elemento flotante siempre ocupará un lugar al extremo izquierdo o derecho del elemento que lo contiene, no existe tal costa como un float centrado, algo que puede ser difícil de entender si vas empezando con el diseño web, pero fácil de recordar conforme avanzas en la práctica.
- Cuando hacemos flotar un elemento este se coloca hasta el extremo borde de la dirección que indicamos, ya sea derecha o izquierda, si después de esto hacemos flotar otro elemento y lo mandamos a la misma dirección, este se va a desplazar hasta que alcance el borde del primer elemento flotante. Si seguimos flotando elemento en la misma dirección estos se irán acumulando hasta que no haya suficiente espacio, cuando esto ocurre se empezaran a desplazar hacia abajo del layout hasta que todos quepan.
- Al momento de utilizar la propiedad tenemos que estar concientes de que la posición vertical del elemento será la que comúnmente ocuparía si estuviera dentro del flujo normal, mientras que la posición horizontal dependerá de la caja contenedora del elemento, si no esta dentro de ninguna otra capa o caja, entonces la ventana el cuerpo de nuestro documento será su límite.
- Todas las cajas que sean creadas antes o después del elemento flotante, fluirán verticalmente de manera normal como si el elemento no existiera. Sin embargo, aquellas cajas que sean creadas al lado de la flotante serán acortadas con fin de dar espacio para que ésta se muestre.
- Si queremos elaborar un layout utilizando únicamente elementos de tipo div con la propiedad “float: left”, estos se alinearán uno tras otro formando columnas. Si al final de este layout quisiéramos agregar un footer o una caja que abarque de manera completa la pantalla, basta con aplicar la propiedad “clear: both” a dicho elemento, de esa manera no importa el tamaño de las columnas que se crearon.
Conclusión
La propiedad float brinda múltiples posibilidades. Tanto para ordenar contenidos dentro de una página como para maquetar, el float es indispensable. La exploración de sus posibilidades nos permite llegar a la conclusión de que solo nuestra imaginación será el límite para su uso.
modificado el 3 junio, 2018 16:31
Ver comentarios (9)
Muy buen tutorial. Sinceramente lo mejor que he visto por ahí. Gracias por enseñar
He quedado encantado con la forma de enseñar la "maquetación de una web", verdaderamente clara y sencilla. Gracias.
Verónica, sería interesante que habilitaras el poder poner código HTML en los comentarios, pues al ser un sitio web de diseño web muchas veces se necesita poder poner ejemplos como era ahora el caso..
Ana, si tienes alguna duda con el HTML, dímelo y te envío el código.
Tienes toda la razón, pero no es tan fácil porque permitir insertar código en los comentarios puede generar vulnerabilidades que es mucho mejor evitar. Estamos trabajando en ofrecer esta opción, esperemos que pronto esté disponible.
Gracias por el aporte!
Se ha borrado el código HTML al subirlo, a ver si usando
ahora se visualiza, en otro caso Ana me puedes contactar y te lo envío.HTML:
Contesto a Ana. Lo primero Ana, es que no se debe usar divs para simular tablas, al igual que no se deben usar tablas para hacer lo que hacen los divs. Para el tipo de estructura que planteas no está aconsejado el uso de divs. Igualmente, he creado el código por si lo quieres implementar en divs. Seguramente hay alguna manera más limpia de hacerlo, pero como ejemplo sirve:
HTML:
CSS (pongo los bordes de colores diferentes por si quieres copiar el código y comprobar que funciona)
.fila {
width:800px;
height:200px;
border:1px solid red;
}
.izquierda, .centro, .derecha {
float:left;
width:195px;
height:200px;
border:1px solid blue;
}
#izquierda_lt {
position:absolute;
width:80px;
height:80px;
border:1px solid green;
}
#izquierda_rt {
position:absolute;
margin-left:80px; /*igual o mayor que el width the #izquierda_lt */
width:80px;
height:80px;
border:1px solid yellow;
}
Posicionamiento relativo - Se maneja en relacion a su posicion normal y no a la del contenedor.
Hola de nuevo, Verónica. A ver si tú eres mi salvación porque ya me estoy volviendo "majara"....
Intento hacer -para abreviar- lo que en tablas sería una fila con 3 celdas/columnas, más debajo una única gran fila/celda. Lo digo en tablas para ser más ilustrativa. Me empeño en hacer lo mismo en div's (uno arriba q equivaldría a la primera fila de esa hipotética tabla) y otro debajo. Y todo ello a la derecha de otro div que sería la barra de navegación.
Pues bien, logro crearlos y que más o menos funcionen ambos. El problema está en el de arriba donde, a su vez, "coloco" otros dos div's (uno en la primera "celda" y otro en la tercera) aunque repito que no se trata de una tabla... Y hacen lo que quieren! no consigo alinearlos, la imagen de la tercera parte se va arriba o abajo... Pruebo con la opción posición, que creía que "relativa" se refería a relativa al contenedor... En fín, un desmadre.
Algún consejito?... Mil gracias.
Pufff... así sin ver el código complicado Ana... tendría que ver el html y el css para poder decirte algo.