Día 60: CSS Float Examples
La ruta del desarrollador web frontend autónomo🤹♂️
Esta página contiene ejemplos de
floatcomunes.
Cajas con ancho igual
Con la propiedad float, es fácil hacer flotar cuadros de contenido uno al lado del otro:
Ejemplo:
**¿Qué es
box-sizing? Puedes crear fácilmente tres cajas flotantes una al lado de la otra. Sin embargo, cuando agrega algo que aumenta el ancho de cada cuadro (por ejemplo, relleno o bordes), el cuadro se romperá. La propiedadbox-sizingnos permite incluir el relleno y el borde en el ancho (y alto) total de la caja, asegurándonos de que el relleno permanezca dentro de la caja y que no se rompa.
Imágenes una al lado de la otra
La cuadrícula de cuadros también se puede usar para mostrar imágenes una al lado de la otra:
Ejemplo:
Cajas de igual altura
En el ejemplo anterior, aprendió a hacer flotar cajas una al lado de la otra con el mismo ancho. Sin embargo, no es fácil crear cajas flotantes con la misma altura. Sin embargo, una solución rápida es establecer una altura fija, como en el siguiente ejemplo:
Ejemplo:
Sin embargo, esto no es muy flexible. Está bien si puede garantizar que las cajas siempre tendrán la misma cantidad de contenido. Pero muchas veces, el contenido no es el mismo. Si prueba el ejemplo anterior en un teléfono móvil, verá que el contenido del segundo cuadro se mostrará fuera del cuadro. Aquí es donde CSS3 Flexbox resulta útil, ya que puede estirar automáticamente las cajas para que sean tan largas como la caja más larga:
Ejemplo:
Uso de Flexbox para crear cajas flexibles:
Menú de navegación
También puedes usar float con una lista de hipervínculos para crear un menú horizontal:
Ejemplo:
Ejemplo de diseño web
También es común hacer diseños web completos usando la propiedad float:
Ejemplo:
Todas las propiedades
| Propiedad | Descripción |
box-sizing | Define cómo se calculan el ancho y la altura de un elemento: si deben incluir relleno y bordes, o no. |
clear | Especifica lo que debería suceder con el elemento que está al lado de un elemento flotante. |
float | Especifica si un elemento debe flotar a la izquierda, a la derecha o no flotar en absoluto. |
overflow | Especifica qué sucede si el contenido desborda el cuadro de un elemento. |
overflow-x | Especifica qué hacer con los bordes izquierdo/derecho del contenido si se desborda el área de contenido del elemento. |
overflow-y | Especifica qué hacer con los bordes superior/inferior del contenido si se desborda el área de contenido del elemento. |
Resumen
Este documento presenta ejemplos de uso de la propiedad CSS float. Se muestran ejemplos de cajas con ancho igual, imágenes una al lado de la otra, cajas de igual altura, menús de navegación y diseños web completos. También se describen otras propiedades relacionadas, como box-sizing, clear, overflow-x y overflow-y.
Traducido con 💚 desde W3Schools.com