Não estou entendendo muito bem o funcionamento do float. No código abaixo estou tentando posicionar os quadrados da seguinte forma: na parte de cima vai ficar o s quadros VERDE, VERMELHO E AMARELO (todos à esquerda e nessa sequência) e logo abaixo eu quero que fique os quadros AZUL E LARANJA (todos à esquerda e nessa sequência), mas por algum motivo não está ficando. Não sei o que está acontecendo. É como se o quadro AZUL estivesse com uma largura de 100% ocupando toda a tela e jogando o quadro LARANJA para baixo.
CÓDIGO HTTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Revisão HTML e CSS</title>
<link rel="stylesheet" href="floats.css">
</head>
<body>
<ol class="quadros">
<li class="quadro-verde">VERDE</li>
<li class="quadro-vermelho">VERMELHO</li>
<li class="quadro-amarelo">AMARELO</li>
<li class="quadro-azul">AZUL</li>
<li class="quadro-laranja">LARANJA</li>
</ol>
</body>
</html>CÓDIGO CSS
.quadros li{
list-style-type: none;
text-align: center;
width: 10rem;
height: 8rem;
}
.quadro-verde{
float: left;
background-color: chartreuse;
}
.quadro-vermelho{
float: left;
background-color: crimson;
}
.quadro-amarelo{
float: left;
background-color: goldenrod;
}
.quadro-azul{
clear: left;
background-color: royalblue;
}
.quadro-laranja{
float: left;
background-color: darkorange;
}