Blog
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:
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:
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.