Menú principal

Floating y posicionamiento

Floating

El concepto "floating" (flotando) aparece en el documento "Extensions to HTML 2.0", y se define como:

"The additions to your ALIGN options need a lot of explation. First, the values 'left' and 'right'. Images with those alignments are an entirely new floating image type".

En navegadores antiguos únicamente "flotaban" imágenes, y en algunos también tablas. Con CSS podemos flotar cualquier elemento, desde imágenes, párrafos o listas. Este comportamiento lo conseguimos utilizando la propiedad float.

La propiedad float permite sacar a un elemento del flujo del documento, y posicionarlo a la izquierda o derecha de otros elementos adyacentes. Admite tres valores, right, left y none.

Un bloque "flotante" debe tener definida su anchura, implicita o expresamente, ya que de lo contrario será tratado como no flotante

Por ejemplo, para hacer flotar una imagen hacia la izquierda, podríamos usar el siguiente código:

<img src="img/yo.jpg" style="float: left;" alt="yo">

Ahora sólo tengo que comprobar como el texto se coloca alrededor de la imagen que acabo de poscionar Ahora sólo tengo que comprobar como el texto se coloca alrededor de la imagen que acabo de poscionar Ahora sólo tengo que comprobar como el texto se coloca alrededor de la imagen que acabo de poscionar

Elementos flotantes

Podemos hacer que flote cualquier elemento en nuestro documento web, incluso los que no son de bloque. Debemos asignar una anchura determinada, ya que cuando asignamos la propiedad float a cualquier elemento, éste se convierte en una caja.

Los márgenes que rodean a los elementos flotantes no se solapan. Si asignamos la propiedad float a una imagen con 20 pixel de margen, comprobaremos como se aplicará un margen de 20 pixel alrededor de la imagen

p img {float: left; margin: 20px;}

Ejemplo: dos divs sin flotar

Ejemplo: primer bloque flotante a la derecha (float: right)

Ejemplo: primer bloque flotante a la izquierda (float: left)

Ejemplo: primer bloque flotante a la izquierda, segundo clear:both

Ejemplo: tres bloques, los dos primeros flotantes a la derecha