Con las propiedades float
y clear
del CSS podemos especificarle a las etiquetas que floten o no dentro de la página.
La propiedad float
La propiedad float
es útil para el posicionamiento y diseño de una página web.
La propiedad float
puede tener uno de los siguientes valores:
left
: La etiqueta HTML flota a la izquierda de su etiqueta contenedora.right
: La etiqueta HTML flota a la derecha de su etiqueta contenedora.none
: La etiqueta HTML no flota. Este es el valor predeterminado.inherit
: La etiqueta HTML hereda el valor de float de su etiqueta contenedora.
El valor right
La declaración float: right;
especifica que la etiqueta HTML debe flotar a la derecha en relación a su etiqueta contenedora.
En la siguiente ejemplo se especifica que una imagen debe flotar a la derecha del texto:
img {
float: right;
}
Muestra:
El valor left
La declaración float: left;
especifica que la etiqueta HTML debe flotar a la izquierda en relación a su etiqueta contenedora.
En la siguiente ejemplo se especifica que una imagen debe flotar a la izquierda del texto:
img {
float: left;
}
Muestra:
El valor none
La declaración float: none;
especifica que la etiqueta HTML no debe de flotar. Este el valor predeterminado para todas las etiquetas.
En el siguiente ejemplo se especifica que una imagen no deba flotar, continuando su flujo al igual que el texto:
img {
float: none;
}
Muestra:
La propiedad clear
La propiedad clear
evita que puedan flotar etiquetas a su lado, ya sea a la izquierda, derecha o ambos.
La propiedad clear puede tener uno de los siguientes valores:
none
: Permite etiquetas flotantes en ambos lados. Este valor es el predeterminado.left
: No permite etiquetas flotantes del lado izquierdo.right
: No permite etiquetas flotantes del lado derecho.both
: No permite etiquetas flotantes ninguno de los lados.inherit
: Hereda el valor de la propiedad clear de su etiqueta contenedora.
La forma más común de usar la propiedad clear
es después de haber utilizado una propiedad float
en un elemento. Cuando se limpia el flotamiento de una etiqueta, debe coincidir la limpieza con el flotamiento. Si una etiqueta flota a la izquierda entonces se debe limpiar a la izquierda. El elemento continuara flotando, pero el elemento limpiado aparecerá debajo en el flujo de la página web.
El siguiente ejemplo limpia el flotamiento a la izquierda, lo que significa que no permitirá elementos con flotamiento a la izquierda.
div {
clear: left;
}
Sí una etiqueta es más alta que la etiqueta contenedora y tiene flotamiento, se desbordara fuera de la etiqueta contenedora.
Muestra:
Para evitar este desbordamiento podemos agregar la declaración overflow: auto; a la etiqueta contenedora para evitar este problema:
.clearfix {
overflow: auto;
}
La declaración overflow: auto;
funciona bien mientras se tenga el control correcto de los márgenes y espaciados (margin y padding), de lo contrario se mostrarán las barras de desplazamiento. Sin embargo, la siguiente manera de limpiar es más seguro de usar:
.clearfix::after {
content: "";
clear: both;
display: table;
}
Nota:
::after
es una pseudo-elemento que veremos más adelante.
Imágenes lado a lado
Con la propiedad float
es posible flotar imágenes lado a lado:
.img-flotantes {
float: left;
width: 33.33%;
padding: 5px;
}
Muestra:
Menú de Navegación Horizontal
Con la propiedad float es posible también crear un menú de navegación horizontal usando listas con enlaces (ligas):
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.active {
background-color: red;
}
Diseño o Maquetación Web
Es también muy común diseñar plantillas web usando la propiedad float:
.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%;
}