Índice

Flotación de las cajas

La propiedad float permite retirar un elemento de tipo caja del flujo normal para situarlo lo más a la derecha o lo más a la izquierda posible dentro de su elemento padre, es decir, su contenedor.

float:

right;

o bien left;

o bien none;

Comentarios

  • El valor right alinea a la derecha el elemento indicado, empujando a los demás elementos hacia la izquierda.

  • El valor left alinea a la izquierda el elemento indicado, empujando a los demás elementos hacia la derecha.

  • El valor none no especifica nada y deja la gestión al navegador.

  • La posición float no puede aplicarse en caso de posicionamiento absoluto.

Ejemplo

<!DOCTYPE html> 
<html lang="es"> 
<head> 
   <title>Html5</title> 
   <meta charset="UTF-8"> 
</head> 
<body> 
<div style="float:right;"> 
<img src="cup.png"> 
</div> 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed 
non risus. Suspendisse lectus tortor, dignissim sit amet, 
adipiscing nec, ultricies sed, dolor. Cras elementum ultrices 
diam. Maecenas ligula massa, varius a, semper congue, euismod non, 
mi.</p> 
</div> 
</body> 
</html>
images/CAP19IMG04.png

El elemento contenedor es la división box. La propiedad de estilo float: right; fuerza la imagen a posicionarse en la parte derecha del contenedor. El texto se distribuye a la izquierda.

La imagen cup.png está disponible ...