Ejemplo de flotación de diseño de disposición
- Página anterior Limpieza de flotación CSS
- Página siguiente inline-block CSS
Esta página proporciona ejemplos comunes de flotación.
Cuadrícula / Caja de ancho igual
Al usar float La propiedad permite flotar fácilmente contenido en cajas en paralelo:
Ejemplo
* {
box-sizing: border-box;
}
.box {
float: left;
width: 33.33%; /* Tres cajas (cuatro cajas usan 25%, dos cajas usan 50%, etc.) */
padding: 50px; /* Si necesitas agregar espacio entre las imágenes */
}
¿Qué es box-sizing?
Puedes crear fácilmente tres cajas flotantes en paralelo. Sin embargo, cuando agregas contenido para expandir el ancho de cada caja (por ejemplo, padding o bordes), esta se daña. box-sizing La propiedad permite incluir la-padding y los bordes en el ancho total (y altura) de la caja, asegurando que la-padding quede dentro de la caja y no se rompa.
Puedes encontrar en nuestras Box Sizing CSS En esta sección, aprenderás más sobre la propiedad box-sizing.
Imágenes en paralelo
Esta cuadrícula de cajas (The grid of boxes) también se puede usar para mostrar imágenes en paralelo:
Ejemplo
.img-container {
float: left;
width: 33.33%; /* Tres cajas (cuatro cajas usan 25%, dos cajas usan 50%, etc.) */
padding: 5px; /* Si necesitas agregar espacio entre las imágenes */
}
Caja de ancho igual
En el ejemplo anterior, aprendiste cómo hacer flotar cajas en paralelo con el mismo ancho. Sin embargo, crear cajas flotantes con la misma altura no es fácil. Sin embargo, una solución rápida es establecer una altura fija, como se muestra en el siguiente ejemplo:
Caja 1
Algunos contenido, algunos contenido, algunos contenido
Caja 2
Algunos contenido, algunos contenido, algunos contenido
Algunos contenido, algunos contenido, algunos contenido
Algunos contenido, algunos contenido, algunos contenido
Ejemplo
.box {
height: 500px;
}
Sin embargo, al hacerlo, se pierde la flexibilidad. Si se puede garantizar que siempre haya el mismo número de contenido en la caja, es posible. Pero a menudo, el contenido es diferente. Si intenta el ejemplo anterior en un teléfono, verá que el contenido de la segunda caja se mostrará fuera de la caja. Esto es donde entra en juego CSS3 Flexbox, porque puede estirar automáticamente la caja para que sea tan larga como la más larga:
Ejemplo
Crear una caja flexible usando Flexbox:
El único problema de Flexbox es que no funciona en Internet Explorer 10 o versiones anteriores. Puede encontrar más información en nuestra Flexbox CSS Aprende más sobre el módulo de diseño Flexbox en este capítulo.
Menú de navegación
Colocar float Usar junto con la lista de hipervínculos para crear un menú horizontal:
Ejemplo
Ejemplo de diseño web
Usar float El atributo se completa a menudo para todo el diseño del sitio web:
Ejemplo
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {
width: 25%;
}
.content {
width: 75%;
}
Más ejemplos
- La imagen con borde y margen flota a la derecha del párrafo
- Hacer que la imagen flote a la derecha del párrafo. Añadir un borde y un margen a la imagen.
- La imagen con título flota a la derecha
- Hacer que la imagen con título flote a la derecha.
- Hacer que la primera letra del párrafo flote a la izquierda
- Hacer que la primera letra del párrafo flote a la izquierda y establecer el estilo de esa letra.
- Crear un sitio web con flotación
- Crear una página de inicio con una barra de navegación horizontal, encabezado, pie de página, barra de navegación lateral izquierda y contenido principal utilizando la flotación.
Todos los atributos de flotación de CSS
| Atributo | Descripción |
|---|---|
| box-sizing | Definir la forma de calcular el ancho y la altura de los elementos: si deben incluir el relleno interno y el borde. |
| clear | Especifica qué elementos pueden flotar junto al elemento que se limpia y en qué lado. |
| float | Especifica cómo flotar debe hacerlo el elemento. |
| overflow | Especifica qué sucederá si el contenido se sobrepasa el cuadro del elemento. |
| overflow-x | Especifica cómo manejar los bordes izquierdo/derecho del área de contenido del elemento cuando se sobrepasa el área del elemento. |
| overflow-y | Especifica cómo manejar los bordes superior/inferior del área de contenido del elemento cuando se sobrepasa el área del elemento. |
- Página anterior Limpieza de flotación CSS
- Página siguiente inline-block CSS
