Hablando de la propiedad Float

Que algo esté alineado (propiedad text-align o atributo align) o que flote (propiedad float) no es lo mismo. Puede parecerlo pero es completamente diferente, de allí que muchas veces, nos encontramos con problemas cuando tratamos de ubicar algo en una determinada posición.

El concepto es difícil de asimilar a primera vista pero, debemos partir de esto: todo lo que agregamos a una página web es un rectángulo y básicamente, sólo hay dos tipos de rectángulos; unos, llamados bloques, ocupan el ancho total de donde se pongan y crean un salto de línea, es decir, son "independientes", se separan de lo que está arriba y de lo que está debajo. El segundo grupo de rectángulos es el llamado inline; estos, ocupan el espacio exacto de su contenido.

Un ejemplo con varias etiquetas coloreadas para que se vea cada rectángulo:

<div>
  <p>Lorem ipsum dolor sit amet, <strong>consectetuer</strong> adipiscing elit, sed <a href="#">diam nonummy</a> nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, <em>quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip</em> ex ea commodo consequat.</p>
</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Etiquetas como DIV, P, los encabezados, etc, son bloques; etiquetas como SPAN, STRONG, EM, A o IMG son inline.

Con CSS, cualquier etiqueta puede convertirse de uno a otro tipo, para eso, es que usamos la propiedad display que puede ser block o inline. De esta forma, una lista que normalmente es una serie de bloques (ya que UL y LI son etiquetas de bloque), la podemos mostrar horizontalmente cambiándoles esa propiedad:

ITEM
ITEM
ITEM

ITEM
ITEM
ITEM

Cuando algo "flota" o sea, cuando le agregamos la propiedad float (left o right), convertimos a ese elemento en un bloque pero con una característica especial: el ancho, a diferencia de un bloque, no es TODO sino sólo su contenido. Por ejemplo, un encabezado H2 es una etiqueta de bloque, normalmente se ve así:

ESTE ES UN ENCABEZADO H2

Podemos cambiarle la propiedad display que, por defecto es block y ponerle inline, veríamos esto:

ESTE ES UN ENCABEZADO H2

Pero lo que quiero es poner eso a la derecha, intento con text-align:right:

ESTE ES UN ENCABEZADO H2

No funciona, lo que se alínea es el contenido, así que lo voy a hacer "flotar":

ESTE ES UN ENCABEZADO H2

¿Qué ocurrió? Se transformó en algo diferente ya no es un bloque en el sentido que ya no ocupa todo el ancho pero tampoco es inline porque veamos que pasa si coloco algo arriba y abajo:

<p style="color: LightSkyBlue;">Ut wisi enim ad minim veniam ... commodo consequat.</p>
<h2 style="float: right;">ESTE ES UN ENCABEZADO H2</h2>
<p style="color: Salmon;">Duis autem vel eum iriure ... nulla facilisi.</p>

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

ESTE ES UN ENCABEZADO H2

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

El texto en azul no sufre cambios pero el texto rojo que está debajo del objeto que flota, se "acomoda" como puede alrededor de este.

Cambiamos para que flote a la izquierda:

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

ESTE ES UN ENCABEZADO H2

Pasa lo mismo, todo lo que está debajo de un elemento que flota "sube" y se acomoda alrededor de este.

Es como si a todo elemento que flotara lo quitáramos de la página, le diéramos un tamaño y luego lo empujáramos dentro de esta, ejerciendo presión. Todo lo que estaba allí antes, se moverá y se acomodará como pueda para hacerle lugar.

Si tenemos varios elementos flotantes, estos se ubicarán a derecha o izquierda, según se lo indiquemos y flotarán hasta el borde o hasta encontrarse con otro elemento flotante. Todo lo que está debajo y no flote, se amoldará hasta que, superada la altura del más alto de estos, la página retome su orden natural:

ABCDLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Carece de importancia si flotan hacia un lado u otro, tienen "prioridad" y el resto del contenido se acoda a ellos:

Sólo hay algo que permite eliminar las consecuencias de esa flotación, otra propiedad llamada clear que tiene cuatro valores posibles: none, left, right y both.

Con left, le decimos al navegador que a partir de ese lugar, ignore las flotaciones izquierda superiores y lo que sigue, se escriba debajo de forma normal; con right hacemos lo mismo para las flotaciones a la derecha y con both, le indicamos que lo haga con ambas:

ABCDLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet ...Desde aqui ya no quiero flotaciones ... ... dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Esa propiedad la agregamos de muchas maneras, por ejemplo en una etiqueta vacía:

<div style="clear:both;"></div>

¿Más sobre flotaciones?

Artículos a leer: bigbaer.com, css.maxdesign, css-tricks, dtott, smashingmagazine

ElHackerZ