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 valor left significa que el elemento formará un bloque que se situará a la izquierda de los elementos adyacentes. Un valor right significa que el bloque se situará a la derecha.

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

clear

clear se utiliza conjuntamente con float para indicar cuando un elemento flotante permite otros elementos flotantes junto a el.

Sus posible valores son none, left right o both.

• none: el elemento permite otros flotantes a ambos lados
• left: el elemento no permite flotantes a su izquierda
• right: el elemento no permite flotantes a su derecha
• both: el elemento no permite flotantes a ningun lado

Ejemplos: dos divs sin flotar

primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque

segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque

Ejemplos: primer bloque flotante a la derecha

primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque

segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque

Ejemplos: primer bloque flotante a la izquierda

primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque

segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque

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

primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque

segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque

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

primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque primer bloque

segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque segundo bloque

tercer bloque tercer bloque tercer bloque tercer bloque tercer bloque tercer bloque tercer bloque tercer bloque tercer bloque tercer bloque tercer bloque tercer bloque tercer bloque tercer bloque tercer bloque tercer bloque tercer bloque tercer bloque tercer bloque tercer bloque tercer bloque

Cuando hay varios elementos flotantes adyacentes (es decir, con el mismo elemento padre) la parte superior de cada caja flotante se alineará a la misma altura si existe espacio. Caso contrario, la última caja será desplazada hacia abajo, hasta el primer lugar donde pueda ser ubicada.

Elementos flotantes

Cualquier elemento puede flotar en la página, no solamente los formadores de bloque. Al asignar la propiedad float a un elemento automáticamente lo estamos convirtiendo en una caja, debiendole asignar una anchura determinada.