CSS Clear
La propiedad clear en CSS se utiliza para especificar si un elemento debe aparecer a la izquierda, derecha o ambos lados de un elemento flotante anterior. Esto es útil para evitar que los elementos siguientes se superpongan a los elementos flotantes anteriores.
Valores
Los valores válidos para esta propiedad son:
left: El elemento no aparecerá a la izquierda de ningún elemento flotante anterior.
right: El elemento no aparecerá a la derecha de ningún elemento flotante anterior.
both: El elemento no aparecerá a la izquierda ni a la derecha de ningún elemento flotante anterior.
none: El elemento se comportará como si la propiedadclearno estuviera establecida. Este es el valor por defecto.
inherit: El elemento heredará el valor de la propiedadclearde su elemento padre.
Ejemplo de uso
Un ejemplo de uso de la propiedad clear podría ser:
<div id="container">
<div id="float-left"> elemento flotando a la izquierda</div>
<div id="clear-both"> elemento con clear: both</div>
</div>
Lenguaje del código: HTML, XML (xml)#float-left {
float: left;
}
#clear-both {
clear: both; /* el elemento con id "clear-both" no aparecerá a la izquierda ni a la derecha del elemento flotante anterior */
}
Lenguaje del código: CSS (css)En este caso el elemento con id “clear-both” no aparecerá a la izquierda ni a la derecha del elemento flotante anterior, evitando así la superposición de elementos.
Es importante mencionar que existen otras técnicas para evitar problemas de superposición como el uso de overflow: hidden o clearfix.
Más ejemplos:
Aquí hay algunos ejemplos de cómo se puede utilizar la propiedad clear en CSS:
- Utilizando
clear: left;para evitar que un elemento se superponga a un elemento flotante a la izquierda:
<html>
<head>
<style>
/* estilos para los elementos flotantes */
.float-left {
float: left;
width: 50%;
background-color: #f0f0f0;
padding: 10px;
}
/* estilos para el elemento con clear */
.clear-left {
clear: left; /* el elemento con id "clear-left" no aparecerá a la izquierda del elemento flotante anterior */
width: 100%;
background-color: #ffffff;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="float-left">elemento flotando a la izquierda</div>
<div class="float-left">elemento flotando a la izquierda</div>
<div class="clear-left">elemento con clear: left</div>
<div class="float-left">elemento flotando a la izquierda</div>
<div class="float-left">elemento flotando a la izquierda</div>
</div>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, el elemento con clase «clear-left» no aparecerá a la izquierda de ningún elemento flotante anterior, evitando así la superposición de elementos.
- Utilizando
clear: right;para evitar que un elemento se superponga a un elemento flotante a la derecha:
<html>
<head>
<style>
/* estilos para los elementos flotantes */
.float-right {
float: right;
width: 50%;
background-color: #f0f0f0;
padding: 10px;
}
/* estilos para el elemento con clear */
.clear-right {
clear: right; /* el elemento con id "clear-right" no aparecerá a la derecha del elemento flotante anterior */
width: 100%;
background-color: #ffffff;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="float-right">elemento flotando a la derecha</div>
<div class="float-right">elemento flotando a la derecha</div>
<div class="clear-right">elemento con clear: right</div>
<div class="float-right">elemento flotando a la derecha</div>
<div class="float-right">elemento flotando a la derecha</div>
</div>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, el elemento con clase «clear-right» no aparecerá a la derecha de ningún elemento flotante anterior, evitando así la superposición de elementos.
- Utilizando
clear: both;para evitar que un elemento se superponga a ambos lados de los elementos flotantes:
<html>
<head>
<style>
/* estilos para los elementos flotantes */
.float {
width: 50%;
background-color: #f0f0f0;
padding: 10px;
}
/* estilos para el elemento con clear */
.clear-both {
clear: both; /* el elemento con id "clear-both" no aparecerá a la izquierda ni a la derecha del elemento flotante anterior */
width: 100%;
backgroundcolor: #ffffff;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="float" style="float: left;">elemento flotando a la izquierda</div>
<div class="float" style="float: right;">elemento flotando a la derecha</div>
<div class="clear-both">elemento con clear: both</div>
<div class="float" style="float: left;">elemento flotando a la izquierda</div>
<div class="float" style="float: right;">elemento flotando a la derecha</div>
</div>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, el elemento con clase “clear-both” no aparecerá a la izquierda ni a la derecha de ningún elemento flotante anterior, evitando así la superposición de elementos.
Espero que estos ejemplos te ayuden a entender mejor cómo se puede utilizar la propiedad clear en CSS para evitar problemas de superposición de elementos flotantes.