No exercício 10 do curso de HTML quando tentei fazer as caixas e deixei o CSS da quinta caixa sem as propriedade clear e float esse elemento ficou escondido atrás da caixa 1, porque isso acontece? o elemento não deveria ficar na linha de baixo?
<DOCTYPE html>
<html>
<head>
<title>caixas</title>
<style>
.caixa-pequena1{
width: 200px;
height: 200px;
background-color: red;
float:left;
}
.caixa-pequena2{
width: 200px;
height: 200px;
background-color: blue;
float:left;
}
.caixa-grande{
width: 300px;
height: 300px;
background-color: green;
float:right;
}
.caixa-pequena3{
width: 200px;
height: 200px;
background-color: yellow;
float: left;
}
.caixa-pequena4{
width: 200px;
height: 200px;
background-color: mediumpurple;
}
</style>
</head>
<body>
<div class="caixa-pequena1">1</div>
<div class="caixa-pequena2">2</div>
<div class="caixa-grande">3</div>
<div class="caixa-pequena3">4</div>
<div class="caixa-pequena4">5</div>
</body>
</html>
