comparte el articulo 

Maquetación de una web: La propiedad float de CSS

Actualizado el 07/12/2011 < > 10 Cometarios

Resumen: Sin el uso de la propiedad float, la maquetación con CSS resultaría imposible. Explora las múltiples posibilidades que esta riquísima propiedad ofrece para el diseño de páginas web.

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

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).

Imagen flotante css

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=”200px” height=”200px” alt=”La Tierra” />
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Suspendisse tortor Vestibulum feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Eu libero Donec sit amet quam egestas semper.</p>
<p>Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Aenean ultricies mi vitae est Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Wisi Vestibulum erat, condimentum sed, commodo vitae, ornare sit amet, WISI. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus.</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 podremos 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 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 fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Suspendisse tortor Vestibulum feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Eu libero Donec sit amet quam egestas semper.</p>
</div>
<div id=”caja2″>
<p>Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Aenean ultricies mi vitae est Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Wisi Vestibulum erat, condimentum sed, commodo vitae, ornare sit amet, WISI. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus.</p>
</div>
</body>

Y el resultado es el siguiente:

Diseño a dos columnas

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.

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. Además de lo ya explicado, la propiedad float tiene muchas otras características y se complementa con otras propiedades, las que iremos explorando en artículos posteriores.

Publicado el 19/03/2010, última actualización 07/12/2011.

Licencia: Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Andrés Fernández

URL: LaWebera.es :: Diseño Web

Añadir Comentario (Subir al texto)

10 Cometarios

  1. Ana

    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.

    Jueves, 30 de septiembre 2010

  2. Verónica Milán

    Pufff… así sin ver el código complicado Ana… tendría que ver el html y el css para poder decirte algo.

    Viernes, 1 de octubre 2010

  3. Ejemplo de maquetación de una página web (segunda parte)

    […] capas que contienen las imágenes de las puntas del menú, ambas son flotantes a la izquierda, y le damos ancho y altura definidos para que sean visibles. Al igual que la lista, se le debe […]

    Lunes, 28 de febrero 2011

  4. asfa

    Posicionamiento relativo – Se maneja en relacion a su posicion normal y no a la del contenedor.

    Jueves, 27 de octubre 2011

  5. Sandra

    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;
    }

    Domingo, 19 de febrero 2012

  6. Sandra

    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:

    Domingo, 19 de febrero 2012

  7. Sandra

    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.

    Domingo, 19 de febrero 2012

  8. Verónica Milán

    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!

    Viernes, 6 de abril 2012

  9. Antonio

    He quedado encantado con la forma de enseñar la “maquetación de una web”, verdaderamente clara y sencilla. Gracias.

    Sábado, 3 de marzo 2012

  10. fernando

    Muy buen tutorial. Sinceramente lo mejor que he visto por ahi. Gracias por enseñar

    Viernes, 1 de marzo 2013

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras