Propiedad float (Referencia de CSS 2.1)

Definición	Posiciona los elementos de forma flotante
Valores permitidos	Alguno o todos los siguientes valores y en cualquier orden: left right none inherit
Valor inicial	none
Se aplica a	Cualquier elemento que no esté posicionado de forma absoluta
Válida en	medios visuales
Se hereda	no
Definición en el estándar	w3.org/TR/CSS2/visuren.html#propdef-float

Ejemplos de uso

La propiedad float posiciona una caja moviéndola todo lo posible a la izquierda o derecha de su posición original. Los tres valores de esta propiedad se interpretan de la siguiente manera:

left, la caja se desplaza todo lo posible a la izquierda de la posición en la que se encontraba. El resto de elementos de la página se adaptan para mostrarse a su derecha (a menos que se indique lo contrario mediante la propiedad clear).
right, la caja se desplaza todo lo posible a la derecha de la posición en la que se encontraba. El resto de elementos de la página se adaptan para mostrarse a su izquierda (a menos que se indique lo contrario mediante la propiedad clear).
none, la caja no se desplaza respecto de su posición original. Además de ser el valor por defecto de esta propiedad, el valor none se puede utilizar para eliminar el float aplicado a un elemento mediante otros selectores.

La principal característica del posicionamiento float es que el resto de elementos de la página se adaptan para fluir alrededor de la caja flotante. En el siguiente ejemplo, se muestra el aspecto por defecto que tendría una página HTML con una imagen y un par de párrafos de texto:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet feugiat justo, vitae feugiat purus. Vivamus aliquam ligula at ornare dignissim. Ut imperdiet rutrum tincidunt. Phasellus rhoncus eros auctor porta vulputate.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis posuere nibh massa, nec sollicitudin eros vestibulum non. Aliquam pellentesque pharetra tortor ut feugiat. Donec vitae gravida nunc, eget tincidunt magna. Aliquam accumsan et justo quis porttitor.

La forma en la que se muestran los elementos de la página es la esperada debido al tipo de cada elemento: las imágenes son elementos en línea y los párrafos son elementos de bloque. No obstante, esta forma de mostrar los contenidos es muy diferente a la que se utilizaría en un medio impreso como una revista o un periódico.

Aplicando el posicionamiento flotante a la imagen, los contenidos de este ejemplo muestran un aspecto mucho más lógico:

El estilo CSS aplicado a la imagen es tan sencillo como:

img {
    float: left;
    margin-right: 1em;
    margin-bottom: 1em;
}

Si añadimos una segunda imagen al ejemplo original y aplicamos los mismos estilos, el resultado es el siguiente:

Este ejemplo muestra el verdadero funcionamiento del posicionamiento flotante: los elementos se mueven todo lo posible hacia la izquierda o hacia la derecha. Normalmente esto significa que se mueven hasta el borde izquierdo/derecho de su elemento contenedor. Sin embargo, en ocasiones ya existen otros elementos flotantes en esa posición, por lo que se colocan a la izquierda/derecha de esos elementos flotantes.

Si en una determinada posición existen muchos elementos flotantes, es posible que el nuevo elemento no quepa. En este caso, el elemento flotante se colocaría lo más a la izquierda/derecha posible en la posición inmediatamente inferior.

En una misma posición puede haber elementos flotados a la izquierda y a la derecha:

Los estilos CSS del ejemplo anterior son los siguientes:

.img1 {
    float: left;
    margin-right: 1em;
    margin-bottom: 1em;
}
.img2 {
    float: right;
    margin-left: 1em;
    margin-bottom: 1em;
}

Si el elemento flotado es muy grande, como la imagen del siguiente ejemplo, puede afectar a varios elementos de la página:

Aunque en el ejemplo anterior parece que los dos párrafos adaptan su forma para fluir alrededor de la imagen flotada, en realidad sólo se adaptan los contenidos y no los propios párrafos.

Si se aplica la propiedad outline sobre los párrafos para ver claramente sus cajas, se aprecia que la forma del párrafo no ha cambiado y sigue siendo rectangular. Los contenidos internos del párrafo sí que cambian su forma para adaptarse al lugar que ocupa el elemento flotado. Esto es importante si se utilizan bordes o fondos en los párrafos, ya que la imagen flotada tapará parte de esos fondos y bordes:

Cuando se utiliza la propiedad float suele ser útil aplicar también la propiedad clear, que permite controlar el comportamiento de los elementos cuando a su alrededor tienen elementos flotantes.

Por último, cuando se utiliza el posicionamiento flotante es común encontrarse el problema de que un determinado elemento tenga en su interior solamente elementos flotados y el resultado visual no sea el esperado.

Si consideras el siguiente código HTML:

<div>
    <a class="anterior"  href="#">Anterior</a>
    <a class="siguiente" href="#">Siguiente</a>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ...</p>

Y aplicas los siguientes estilos CSS:

a.anterior {
    float: left;
}

a.siguiente {
    float: right;
}

El resultado esperado sería el siguiente:

Anterior Siguiente

Sin embargo, el resultado obtenido es realmente el siguiente:

Anterior Siguiente

Los enlaces "anterior" y "siguiente" se salen del <div> en el que se encuentran. Este comportamiento es habitual cuando un elemento solamente contiene en su interior elementos posicionados de forma flotante. Para solucionarlo, aplica la propiedad overflow con el valor auto sobre ese elemento contenedor:

div {
    overflow: auto;
}

a.anterior {
    float: left;
}

a.siguiente {
    float: right;
}

Si ahora pruebas de nuevo este ejemplo, el resultado sí que será el esperado:

Anterior Siguiente