Flotación

La propiedad float permite hacer flotar un elemento. Los elementos a continuación de un elemento flotante, fluyen a su alrededor. Esto se puede impedir mediante el uso de la propiedad clear. Cabe señalar que los elementos posicionados de manera absoluta ignoran el valor de esta propiedad. Las palabras reservadas que se admiten como posibles valores para la propiedad son las siguientes:

  • none : El elemento no flota. Valor por defecto.

  • left : El elemento flota a la izquierda de su contenedor.

  • right : El elemento flota a la derecha de su contenedor.

Veamos algunos ejemplos de uso:

<!DOCTYPE html>
<html>
<head>
    <style>
        .caja {
            color: white;
            border: 1px solid black;
            height: 30px;
            width: 200px;
            padding: 10px;
            text-align: center;
        }
        .normal {
            background-color: teal;
        }
        /* Flotación a la izquierda */
        .flotanteL {
            background-color: darkblue;
            float: left;
        }
        /* Flotación a la derecha */
        .flotanteR {
            background-color: darkred;
            float: right;
        }
        /* Eliminamos el efecto de flotación a la izquierda */
        #noFlota7 {
            clear: left;
            background-color: darkgreen;
        }
    </style>
</head>
<body>
    <div class="normal caja">NO FLOTANTE #1</div>
    <div class="normal caja">NO FLOTANTE #2</div>
    <div class="flotanteL caja">FLOTANTE IZQUIERDA #1</div>
    <div class="flotanteL caja">FLOTANTE IZQUIERDA #2</div>
    <div class="normal caja">NO FLOTANTE #3</div>
    <div class="normal caja">NO FLOTANTE #4</div>
    <div class="flotanteR caja">FLOTANTE DERECHA #1</div>
    <div class="flotanteR caja">FLOTANTE DERECHA #2</div>
    <div class="normal caja">NO FLOTANTE #5</div>
    <div class="normal caja">NO FLOTANTE #6</div>
    <div class="flotanteL caja">FLOTANTE IZQUIERDA #3</div>
    <div class="flotanteL caja">FLOTANTE IZQUIERDA #4</div>
    <div id="noFlota7" class="normal caja">NO FLOTANTE #7 (CLEAR)</div>
    <div class="normal caja">NO FLOTANTE #8</div>
</body>
</html>
LogoEjemplos de Flotacióncdpn.io

La propiedad float es especialmente útil para la creación de menús y la organización del layout de la web, por lo que se recomienda encarecidamente la consulta de los ejemplos de flotación del W3Schools

Cancelar la flotación

La propiedad clear permite establecer en qué lados del elemento seleccionado no se permite la aparición de elementos flotantes, contrarestando así los efectos de la flotación. Las palabras reservadas que se admiten como posibles valores para la propiedad son las siguientes:

  • none : Se permiten elementos flotantes a ambos lados. Valor por defecto.

  • left : No se permiten elementos flotantes a la izquierda del elemento.

  • right : No se permiten elementos flotantes a la derecha del elemento.

  • both : No se permiten elementos flotantes en ambos lados.

Veamos algunos ejemplos de uso:

/* Las imágenes flotan a la izquierda */
img {
  float: left;
}
/* Los párrafos de tipo clear no permiten la flotación de elementos en ninguno de sus lados, lo que impedirá que las imágenes floten a su izquierda, desplazando el texto a la derecha */
p.clear {
  clear: both;
}

Esta propiedad debería utilizarse siempre en elementos que no deban flotar y que aparezcan tras los elementos flotantes, de esta forma, se asegura el correcto control de flujo de renderizado

Existe un truco llamado Clearfix Hack que permite corregir el problema de que si un elemento flotante es más alto que su contenedor éste sobresalga del mismo. Clearfix Hack consigue que el elemento contenedor se redimensione impidiendo que el elemento flotante sobresalga. Puedes ver un ejemplo de dicho truco en: Ejemplo de uso de Clearfix Hack

AnteriorPosicionamientoSiguienteFlexbox

Última actualización

¿Te fue útil?