CSS Float (flotación)
¿Qué es CSS Float (flotación)?
El Float (flotación) de CSS hace que los elementos se muevan hacia la izquierda o la derecha, y los elementos que los rodean también se reorganizan.
Float (flotación) se usa a menudo para imágenes, pero también es muy útil en el diseño de layout.
Cómo flotan los elementos
La flotación horizontal de un elemento significa que solo puede moverse hacia la izquierda o la derecha, no hacia arriba o abajo.
Un elemento flotante se moverá lo más posible hacia la izquierda o la derecha, hasta que su borde exterior toque el borde de la caja contenedora o el borde de otra caja flotante.
Los elementos posteriores a un elemento flotante lo rodearán.
Los elementos anteriores a un elemento flotante no se verán afectados.
Si la imagen está flotando a la derecha, el flujo de texto siguiente la rodeará por la izquierda:
Elementos flotantes uno al lado del otro
Si colocas varios elementos flotantes juntos, se colocarán uno al lado del otro si hay espacio.
Aquí, aplicamos la propiedad float a la galería de imágenes:
Limpiar la flotación - usando clear
Después de que un elemento flote, los elementos circundantes se reorganizan. Para evitar esto, usa la propiedad clear.
La propiedad clear especifica que no pueden aparecer elementos flotantes a ambos lados del elemento.
Usar la propiedad clear para agregar una galería de imágenes al texto:
Más ejemplos
Añadir borde y margen a la imagen y flotar a la derecha del párrafo
Vamos a añadir un borde y un margen a la imagen y hacerla flotar a la derecha del párrafo.
Título e imagen flotan a la derecha
Haz que el título y la imagen floten a la derecha.
Haz que la primera letra del párrafo flote a la izquierda.
Modifica el estilo para que la primera letra del párrafo flote a la izquierda.
Crear una página web sin tablas
Utiliza float para crear un encabezado de página, un pie de página, un contenido izquierdo y un contenido principal.
Todas las propiedades de flotación en CSS
Los números en la columna 'CSS' indican las diferentes versiones de CSS (CSS1 o CSS2) que definen la propiedad.
| Propiedad | Descripción | Valor | CSS |
|---|---|---|---|
| clear | Especifica que no se permiten elementos flotantes alrededor del elemento. | left right both none inherit |
1 |
| float | Especifica si una caja (elemento) puede flotar. | left right none inherit |
1 |