Hola, no me quedó claro, porque utilizo la propiedad clear.
Tampoco porque lo coloco en el titulo, sabiendo que fue la imagen la que tiene el float.
Si quiero colocar otra imagen con float left, el clear sirve? o si quiero colocar una imagen float right en la misma linea, el clear serviría, la verdad que no me quedo claro.
Desde ya muchas gracias!
Hola Kevin, espero que estés bien! La propiedad clear de CSS especifica si un elemento puede tener elementos flotantes (en-US) junto a él o si deben moverse debajo de él (clear). Esta propiedad se aplica tanto a los elementos flotantes como a los no flotantes. ¡Para cualquier duda, estoy disponible! ¡Vamos juntos! ¡No desanimes! :)
Hola:
La propiedad CSS float especifica como debe flotar el elemento donde se declara.
La propiedad CSS clear especifica que elementos pueden flotar debajo del elemento "limpiado" y de que lado. De tal manera que para usar clear en un elemento, el elemeto anterior debe incluir un float.
ejemplo:
div1 { float: left; } div2 { clear: left; }
Tal vez este ejemplo no sea tan ilustrativo ya que se conseguiría el mismo efecto si la propiedad display del contenedor de ambos elementos tuviera el valor block. Pero intenta lo siguiente:
div3 { float: right; } div4 { clear: right; }
Este efecto solo se consigue de esta manera.
un ejemplo completo:
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
float: right;
padding: 10px;
border: 3px solid #73AD21;
}
.div2 {
padding: 10px;
border: 3px solid red;
}
.div3 {
float: right;
padding: 10px;
border: 3px solid #73AD21;
}
.div4 {
padding: 10px;
border: 3px solid red;
clear: right;
}
</style>
</head>
<body>
<h2>Sin clear</h2>
<div class="div1">div1</div>
<div class="div2">div2 - Nota que div2 está después de div1 en el código HTML. Sin embargo, debido a que div1 flota a la derecha, el texto en div2 fluye alrededor de div1.</div>
<br><br>
<h2>Con clear</h2>
<div class="div3">div3</div>
<div class="div4">div4 - Aquí, clear: right; mueve div4 abajo del elemento flotante div3 y éste se coloca a la derecha.</div>
</body>
</html>Si te fue de ayuda. No olvides marcar como solucionado.
Saludos.