Sesión 9 – Maquetación CSS

1

Float (flotante)Hacer que el contenido fluya alrededor de un elemento

La propiedad float permite que un elemento «flote» a la izquierda o la derecha, y el contenido que lo sigue se distribuya a su alrededor:

                CSS
.profile-pic {
    float: left;
    margin: 0 15px 15px 0;
    width: 150px;
    border-radius: 50%;
}
            

Clearfix

Cuando los elementos flotan, el contenedor padre puede «colapsar» (perder su altura). Se soluciona con clear o el truco del clearfix:

                CSS
/* Aplicar clear al elemento siguiente */
.clear { clear: both; }

/* O usar clearfix en el contenedor padre */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}
            

Nota: Float se usaba mucho para maquetación antes de Flexbox y Grid. Hoy en día se recomienda Flexbox para la mayoría de los layouts.

2

PositionCómo se posiciona un elemento

La propiedad position controla cómo se posiciona un elemento:

static (por defecto) — El elemento sigue el flujo normal del documento.
relative — El elemento se posiciona relativo a su posición normal. Se puede mover con top, right, bottom, left, pero su espacio original se conserva.
absolute — El elemento se saca del flujo y se posiciona relativo a su ancestro posicionado más cercano (o al <body> si no hay ninguno).
fixed — El elemento se posiciona relativo a la ventana del navegador. No se mueve al hacer scroll.

Ejemplos

                CSS
/* Barra de navegación fija */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    color: white;
    padding: 10px 20px;
    z-index: 1000;
}

/* Insignia sobre un elemento */
.badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: red;
    color: white;
    border-radius: 50%;
    padding: 2px 8px;
    font-size: 12px;
}
            

3

Columnas con inline-blockLayout sencillo sin Flexbox

Se pueden crear columnas sencillas con display: inline-block:

                CSS
.column-box {
    display: inline-block;
    width: 45%;
    vertical-align: top;
    padding: 15px;
    margin: 2%;
    background-color: #f5f5f5;
    border-radius: 5px;
}
            

Atención: Con inline-block, los espacios en blanco del HTML (saltos de línea, espacios entre etiquetas) crean pequeños huecos entre los elementos. Flexbox no tiene este problema.

4

Introducción a FlexboxSistema de maquetación moderno y flexible

                CSS
.menu {
    display: flex;
    justify-content: center;   /* Alineación horizontal */
    align-items: center;       /* Alineación vertical */
    gap: 20px;                 /* Espacio entre elementos */
    list-style: none;
    padding: 0;
    background-color: #333;
}

.menu li a {
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    display: block;
}
            

Propiedades del contenedor flex

Propiedad	Valores	Descripción
`display`	`flex`	Activa Flexbox
`flex-direction`	`row`, `column`	Dirección del eje principal
`justify-content`	`flex-start`, `center`, `flex-end`, `space-between`, `space-around`, `space-evenly`	Alineación en el eje principal
`align-items`	`flex-start`, `center`, `flex-end`, `stretch`, `baseline`	Alineación en el eje cruzado
`flex-wrap`	`nowrap`, `wrap`	Permite pasar a la siguiente línea
`gap`	longitud	Espacio entre elementos

5

Flexbox PlaygroundCambia las propiedades y observa el resultado

Experimenta con Flexbox

flex-direction:

justify-content:

align-items:

flex-wrap:

gap:

1

2

3

4

5

.container { display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; flex-wrap: nowrap; gap: 10px; }

6

Ejercicio prácticoAplica lo aprendido

Crea un menú de navegación horizontal usando Flexbox con una lista <ul> y display: flex.
Añade una imagen de perfil flotante con float: left seguida de un párrafo de texto que la rodee.
Crea un layout de dos columnas con display: inline-block y width: 45%.
Crea una barra de navegación fija con position: fixed que permanezca en la parte superior al hacer scroll.
Recuerda añadir margin-top al <body> o al primer elemento para compensar la barra fija.
Experimenta con justify-content: space-between y space-around en un contenedor flex.