Propiedad CSS clear
La propiedad CSS clear define en qué lados no se permiten elementos flotantes. Encuentra ejemplos y pruébalos.
La propiedad clear está directamente relacionada con los floats. Controla si un elemento puede colocarse junto a un elemento flotante anterior, o si debe desplazarse hacia abajo (limpiarse) por debajo de él.
Cuando un elemento es flotante, el contenido que le sigue se envuelve alrededor del float. clear permite detener ese envolvimiento: un elemento limpiado cae por debajo del borde inferior de los floats en el lado especificado, en lugar de fluir junto a ellos.
Esta página cubre lo que hace cada valor de clear, la razón más común para usar clear (el patrón "clearfix" para contener floats) y los errores a tener en cuenta.
Cómo funciona clear
clear acepta los valores none, left, right, both, initial e inherit:
none— el valor predeterminado. El elemento puede colocarse junto a floats en ambos lados.left— el elemento se mueve por debajo de cualquier float izquierdo que aparezca antes de él.right— el elemento se mueve por debajo de cualquier float derecho que aparezca antes de él.both— el elemento se mueve por debajo de todos los floats en cualquier lado. Este es el valor que se necesita la mayor parte del tiempo.
Nota: clear solo reacciona a los floats que aparecen antes en el código fuente y solo afecta a los elementos en flujo de bloque normal. No tiene efecto dentro de los diseños Flexbox o Grid, donde el propio float es ignorado.
¿Cuándo usaría clear?
El uso más común de clear es contener floats. Un padre que contiene solo hijos flotantes se colapsa a cero de altura, porque los floats se sacan del flujo normal. La solución clásica — el "clearfix" — añade un pseudo-elemento limpiado después de los floats para que el padre se estire y los envuelva:
/* Clearfix: makes a container wrap its floated children */
.container::after {
content: "";
display: block;
clear: both;
}El otro uso habitual es forzar a un pie de página, encabezado o salto de sección a comenzar por debajo de una imagen flotante o barra lateral en lugar de envolverse junto a ella — que es exactamente lo que muestran los ejemplos a continuación.
| Valor inicial | none |
|---|---|
| Se aplica a | Elementos de nivel de bloque. |
| Heredado | No. |
| Animable | No. |
| Versión | CSS1 |
| Sintaxis DOM | element.style.clear = "both"; |
Sintaxis
Sintaxis de la propiedad CSS clear
clear: none | left | right | both | initial | inherit;Ejemplo de la propiedad clear:
Ejemplo de la propiedad CSS clear con el valor left
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
float: left;
background: #ccc
}
.clear {
clear: left;
}
</style>
</head>
<body>
<img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" />
<p class="clear">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</body>
</html>Resultado
Ejemplo de la propiedad clear con el valor "right":
Ejemplo de la propiedad CSS clear con el valor right
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
float: right;
background: #ccc
}
.clear {
clear: right;
}
</style>
</head>
<body>
<img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" />
<p class="clear">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</body>
</html>Ejemplo de la propiedad clear con el valor "both":
Ejemplo de la propiedad CSS clear con el valor both
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
float: right;
background: #CCC;
}
p.clear {
clear: both;
}
</style>
</head>
<body>
<img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" width="220" height="80" />
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<p class="clear">
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</body>
</html>Ejemplo del patrón clearfix
Este es clear haciendo su trabajo más útil: sin la regla clearfix, el cuadro con borde colapsaría a cero de altura porque su único hijo es flotante. El pseudo-elemento ::after con clear: both obliga al cuadro a envolver el float.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box {
border: 3px solid #1c87c9;
}
.box img {
float: left;
background: #ccc;
}
/* Remove this rule and the border collapses around nothing */
.box::after {
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="box">
<img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" width="220" height="80" alt="Floated image" />
</div>
</body>
</html>Errores comunes
clearsolo ve los floats anteriores. Desplaza un elemento por debajo de los floats que aparecen antes en el código fuente, no después. Ordena el marcado en consecuencia.- Limpiar el elemento flotante en sí raramente ayuda. Para contener floats, limpia un hermano después de ellos (el
::afterdel clearfix), no los floats en sí. - No hace nada en Flexbox o Grid. Dentro de un contenedor flex o grid,
floates ignorado, por lo queclearno tiene nada sobre lo que actuar. Usa Flexbox o Grid en lugar de diseños basados en float para el nuevo código.
Valores
| Valor | Descripción |
|---|---|
| none | Permite elementos flotantes en ambos lados. Es el valor predeterminado de esta propiedad. |
| left | Significa que los elementos flotantes no están permitidos en el lado izquierdo. |
| right | Significa que los elementos flotantes no están permitidos en el lado derecho. |
| both | Significa que los elementos flotantes no están permitidos en ningún lado. |
| initial | Hace que la propiedad use su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |