La propiedad clear se usa para especificar qué lado de los elementos flotantes no pueden flotar. Establece o devuelve la posición del elemento en relación con los objetos flotantes. Si el elemento puede caber horizontalmente en el espacio junto a otro elemento que flota, lo hará.
Sintaxis:
clear: none|left|right|both|inline-start|inline-end|initial;
Valores de propiedad:
- none: Tiene un valor por defecto. Permite que el elemento flote en ambos lados.
Sintaxis:
clear:none;
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<style>
div {
width:100px;
height:100px;
background-color:green;
color:white;
font-weight:bold;
font-style;itallic;
font-size:25px;
text-align:center;
float: left;
padding:15px;
}
p.GFG {
clear: none;
}
h1, h2 {
color:green;
text-align:center;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<h1>clear:none;</h1>
<div><pre>GFG</pre></div>
<p>
GeeksforGeeks:
A computer science portal for geeks
</p>
<p class="GFG">GeeksforGeeks</P>
</body>
</html>
Producción:
- izquierda: esta propiedad especifica que los elementos no pueden flotar en el lado izquierdo en relación con otro elemento.
Sintaxis:
clear:left;
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<style>
div {
width:100px;
height:100px;
background-color:green;
color:white;
font-weight:bold;
font-style;itallic;
font-size:25px;
text-align:center;
float: left;
padding:15px;
}
p.GFG {
clear: left;
}
h1, h2 {
color:green;
text-align:center;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<h1>clear:left;</h1>
<div><pre>GFG</pre></div>
<p>
GeeksforGeeks:
A computer science portal for geeks
</p>
<p class="GFG">GeeksforGeeks</P>
</body>
</html>
Producción:
- right: Significa que los elementos no pueden flotar en el lado derecho.
Sintaxis:
clear:right;
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<style>
div {
width:100px;
height:100px;
background-color:green;
color:white;
font-weight:bold;
font-style;itallic;
font-size:25px;
text-align:center;
float: left;
padding:15px;
}
p.GFG {
clear: right;
}
h1, h2 {
color:green;
text-align:center;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<h1>clear:right;</h1>
<div><pre>GFG</pre></div>
<p>
GeeksforGeeks:
A computer science portal for geeks
</p>
<p class="GFG">GeeksforGeeks</P>
</body>
</html>
Producción:
- ambos: significa que los elementos flotantes no pueden flotar en ambos lados.
Sintaxis:
clear:both;
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<style>
div {
width:100px;
height:100px;
background-color:green;
color:white;
font-weight:bold;
font-style;itallic;
font-size:25px;
text-align:center;
float: left;
padding:15px;
}
p.GFG {
clear: both;
}
h1, h2 {
color:green;
text-align:center;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<h1>clear:both;</h1>
<div><pre>GFG</pre></div>
<p>
GeeksforGeeks:
A computer science portal for geeks
</p>
<p class="GFG">GeeksforGeeks</P>
</body>
</html>
Producción:
- initial: Establece la propiedad a su valor por defecto.
Sintaxis:
clear:initial;
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<style>
div {
width:100px;
height:100px;
background-color:green;
color:white;
font-weight:bold;
font-style;itallic;
font-size:25px;
text-align:center;
float: left;
padding:15px;
}
p.GFG {
clear: initial;
}
h1, h2 {
color:green;
text-align:center;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<h1>clear:initial;</h1>
<div><pre>GFG</pre></div>
<p>
GeeksforGeeks:
A computer science portal for geeks
</p>
<p class="GFG">GeeksforGeeks</P>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad clara se enumeran a continuación:
- Google Chrome 1.0
- Borde 12.0
- Internet Explorer 4.0
- Firefox 1.0
- Ópera 3.5
- Safari 1.0
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA