float
Esta propiedad se usa principalmente para envolver texto alrededor de un elemento (como una imagen) y solía ser la base de maqueteción de columnas antes de la llegada de Flexbox y Grid.
- left: Posicionará el elemento a la izquierda dentro del elemento padre (en cuanto encuentra un hueco lo suficientemente grande para que quepa, lo coloca ahí)
- right: lo mismo, pero posicionándolo a la derecha.
- none: Por defecto, dibujará el contenido donde aparezca en el código HTML.
Ejemplos de como alinear una imagen a la derecha dentro de un párrafo, o fuera de el.
Ejemplo de como alinear la primera letra de un párrafo a la izquierda.
Ejemplo de como hacer un menú a partir de una lista, quitándole la propiedad de salto de línea a los elementos <li> con (display: inline;), y poniendo los enlaces como elementos flotantes alineados a la izquierda (cambia left por right para ver el efecto). Actualmente debemos usar grid o flex como veremos más adelante.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo Float CSS</title>
<link rel="stylesheet" href="float-styles.css">
</head>
<body>
<h2>Float: left (Flotar a la Izquierda)</h2>
<div class="contenedor">
<img class="flotante float-left" src="imagen-pequena.jpg" alt="Caja izquierda">
<p>Este párrafo envuelve la imagen. Cuando una imagen o cualquier otro elemento tiene un float: left, es sacado del flujo normal del documento y se empuja hacia el borde izquierdo de su contenedor. El contenido que le sigue (en este caso, este texto) fluirá a su alrededor por el lado derecho. Esto es ideal para maquetar textos de periódicos o artículos donde quieres que las imágenes se integren con el cuerpo del texto.</p>
</div>
<hr>
<h2>Float: right (Flotar a la Derecha)</h2>
<div class="contenedor">
<img class="flotante float-right" src="imagen-pequena.jpg" alt="Caja derecha">
<p>Aquí tenemos otro ejemplo, pero esta vez la imagen tiene un float: right. Esto significa que la imagen se empuja hacia el borde derecho de su contenedor, y el texto de este párrafo fluirá a su alrededor por el lado izquierdo. Observa cómo el contenido subsiguiente siempre se adapta al espacio disponible. Si el texto es lo suficientemente largo, continuará debajo de la imagen una vez que haya llenado el espacio a su lado.</p>
</div>
<hr>
<h2>Float: none (Sin Flotación)</h2>
<div class="contenedor">
<img class="flotante float-none" src="imagen-pequena.jpg" alt="Caja sin float">
<p>Este elemento tiene float: none, que es el valor por defecto. Como puedes ver, la imagen se comporta como un elemento inline, y el texto simplemente comienza después de ella, sin envolverla. Ambos elementos mantienen su posición en el flujo normal del documento, uno después del otro, sin interactuar para maquetar el espacio.</p>
</div>
</body>
</html>Cuando usas float, el elemento sacado del flujo normal, lo que a menudo hace es que el elemento contenedor (div.contenedor en este caso), se colapse en altura. Para arreglarlo esto y forzar al contenedor a "encerrar" a sus hijos flotantes, se utiliza la técnica clearfix.