CSS

Float en CSS

La propiedad float en CSS sirve para posicionar una etiqueta a la izquierda o derecha de su posición original. En este tutorial aprenderemos a utilizar esta propiedad junto a sus posibles valores left y right.

¿Cómo utilizar la propiedad float en CSS?

Antes de comenzar es importante saber que al indicar esta propiedad con algún valor (left o right) el resto de los elementos de la página se adaptarán para mostrarse a su izquierda o derecha.
En el siguiente ejemplo podemos ver tres cuadrados de distintos colores movidos a la izquierda en la misma linea:

<!DOCTYPE html>
<html>
  <head>
    <title>Float en CSS</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
      .cuadrado{
        width: 200px;
        height: 200px;
        margin: 2px;
        /* Ubicar a la izquierda */
        float: left;
      }
      .rojo{
        background: red;
      }
      .azul{
        background: blue;
      }
      .verde{
        background: green;
      }
    </style>
  </head>
  <body>
    <div class="cuadrado rojo">
    </div>
    <div class="cuadrado azul">
    </div>
    <div class="cuadrado verde">
    </div>
  </body>
</html>

Si visualizamos la página anterior los cuadrados se mostrarían de la siguiente forma:

Cuadrados con la propiedad float en left

Cuadrados con la propiedad float en left

Ahora si queremos ordenarlos hacia la derecha solamente debemos cambiar el valor de la propiedad float por right y nuestros cuadrados quedarían al revés sobre el margen de la derecha.

Es muy común que necesitemos ubicar etiquetas con float que no afecten la posición de otras, esto lo podemos hacer con otra propiedad llamada clear. Los valores para esta propiedad pueden ser:

* both: Limpia el float de la izquierda y derecha.
* right: Limpia el float de la derecha.
* left: Limpia el float de la izquierda.

Para entender mejor esta propiedad agregaremos un clear después del cuadrado azul en el código anterior, quedando de la siguiente manera:

<!DOCTYPE html>
<html>
  <head>
    <title>Float en CSS</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
      .cuadrado{
        width: 200px;
        height:200px;
        margin: 2px;
		/* Ubicar a la izquierda */
        float: left;
      }
      .rojo{
        background: red;
      }
      .azul{
        background: blue;
      }
      .verde{
        background: green;
      } 
      .clear{
        clear:left;
      }
    </style>
  </head>
  <body>
    <div class="cuadrado rojo izquierda">
    </div>
    <div class="cuadrado azul">
    </div>
    <div class="clear">
    </div>
    <div class="cuadrado verde">
    </div>
  </body>
</html>

El resultado de esta página sería:

Float left con clear en CSS

Float left con clear en CSS

Bueno gente, hemos llegado al final de este tutorial para aprender a utilizar la propiedad float en CSS. Ante cualquier problema no duden en dejar un comentario.

Compartilo en
Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestEmail this to someone

AboutJosé Di Meglio

Apasionado de la tecnología y programación. Aportando información gratuita sobre el mundo de la informática.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *