clear:left;
clear:left;
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 resuelto.
Saludos.