Posicionamiento y Float en CSS
Las propiedades float y position te permiten controlar cómo se colocan las cajas HTML en una página, ya sea sacándolas del flujo normal, alineándolas a un lado, o fijándolas en posiciones específicas. En esta lección veremos cómo funcionan, cuándo usarlas, y cómo evitar los errores clásicos que causan comportamientos confusos, especialmente en diseños con elementos flotantes o posicionados.
¿Qué es el posicionamiento?
Por defecto, todos los elementos siguen el flujo normal del documento: uno debajo de otro, de arriba a abajo. Cuando usamos la propiedad position, modificamos ese comportamiento y podemos mover cajas manualmente dentro del documento.
position: static
Es el valor por defecto. El elemento está dentro del flujo normal. Las propiedades top, left, right, bottom no tienen efecto.
div {
position: static;
}position: relative
El elemento sigue ocupando su espacio original en el flujo, pero puede desplazarse con top, left, etc. Ese espacio sigue reservado, aunque visualmente se haya movido.
h2 {
position: relative;
top: 10px;
left: 20px;
}position: absolute
El elemento se saca del flujo y se posiciona respecto a su contenedor posicionado más cercano (uno con position: relative, absolute, o fixed). Si no hay ninguno, se toma como referencia el <html>.
div.contenedor {
position: relative;
}
div.absoluto {
position: absolute;
top: 0;
right: 0;
}position: fixed
El elemento se posiciona respecto a la ventana del navegador y no se mueve aunque se haga scroll. Muy útil para menús, botones flotantes, etc.
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
}position: sticky
El elemento se comporta como relative hasta que llega a una posición definida, donde se queda fijo como fixed. Funciona solo dentro de su contenedor.
header {
position: sticky;
top: 0;
}Consejo: Para que funcione bien, el contenedor padre no debe tener overflow: hidden o overflow: auto.
¿Qué es float?
La propiedad float hace que un elemento se alinee a la izquierda o derecha y que el contenido posterior lo rodee. Aunque originalmente se creó para flotar imágenes, se usó durante años para maquetación.
img {
float: left;
margin-right: 1em;
}Nota: El elemento flotante se saca del flujo. Eso puede provocar que su contenedor <div> colapse, y no tenga altura aparente.
clear: evitar que un elemento se superponga a floats anteriores
La propiedad clear se usa para forzar que un elemento no flote junto a elementos anteriores, sino que baje debajo de ellos.
footer {
clear: both;
}Cómo evitar que el contenedor colapse
Cuando todos los elementos de un contenedor están flotando, el contenedor puede tener altura cero. Para evitarlo se usaba el “clearfix”:
.clearfix::after {
content: "";
display: block;
clear: both;
}Otra solución moderna es usar overflow: auto o hidden en el contenedor:
.contenedor {
overflow: auto;
}visibility: hidden y display: none
Ambas propiedades hacen que un elemento no se vea, pero funcionan de forma distinta:
visibility: hidden: el elemento se oculta pero sigue ocupando espacio.display: none: el elemento se elimina del flujo, no ocupa espacio.
.invisible {
visibility: hidden;
}
.oculto {
display: none;
}z-index: control de superposición
Cuando hay elementos posicionados (con position distinto de static), z-index define qué elemento aparece encima de otro.
Un número mayor significa que está más "arriba" visualmente.
.uno {
position: absolute;
z-index: 1;
}
.dos {
position: absolute;
z-index: 10;
}Nota: Solo tiene efecto en elementos posicionados (relative, absolute, fixed o sticky).
overflow
Controla qué ocurre cuando el contenido de un elemento se desborda de su caja.
Valores comunes:
visible: el contenido desbordado se muestra fuera del elemento (valor por defecto).hidden: se recorta el contenido y no se puede ver.scroll: aparece una barra de desplazamiento siempre.auto: aparece la barra de desplazamiento solo si es necesaria.
div {
width: 200px;
height: 100px;
overflow: auto;
}Tip: En diseños modernos, overflow también se usa para evitar colapsos en contenedores flotantes o para limitar la visibilidad de un área con scroll personalizado.
¿Sigue siendo útil float hoy?
No para maquetación general. Hoy usamos flex o grid. Pero sigue siendo útil para alinear una imagen al lado de un texto, o crear columnas simples con poco código.
Buenas prácticas
Valores universales: Las propiedades position, top, left, float, clear aceptan initial, inherit y unset.
initial: valor por defecto del navegador.inherit: hereda del contenedor padre.unset: se comporta comoinitialoinheritsegún el caso.
Evita usar float para diseño de página completo. Flexbox y Grid son más modernos, limpios y seguros.
Si usas float, controla el contenedor con clearfix o overflow para evitar colapsos.
No combines float y position sin entender sus efectos. El resultado puede ser impredecible.
Revisa con el inspector: muchas veces los errores de maquetación se deben a un float o position mal aplicados.