Gostaria de mais explicações, não entendi muito bem o exercício.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Gostaria de mais explicações, não entendi muito bem o exercício.
Salve o codigo abaixo em um html da pra ir pegando o exercício. Coloque todos float: right, clear: none. Depois float: right, clear: left.... vai testando algumas situacoes que a imagem vai explicar melhor
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{ width: 100px; height: 100px; text-align:center; line-height: 100px; }
.caixa-1 {
background: red;
float: left;
clear: none;
}
.caixa-2 {
background: blue;
float: left;
clear: none;
}
.caixa-3 {
width: 200px; height: 200px; line-height: 200px;
background: green;
float: right;
clear: none;
}
.caixa-4 {
background: orange;
float: left;
clear: right;
}
.caixa-5 {
background: pink;
float: left;
clear: both;
}
</style>
</head>
<body>
<div class="caixa-1">1</div>
<div class="caixa-2">2</div>
<div class="caixa-3">3</div>
<div class="caixa-4">4</div>
<div class="caixa-5">5</div>
</body>
</html>A entendi, no caso se eu colocar apenas o float: rigth sem o clear: right a caixa, vai para o lado ESQUERDO da caixa 3. Quando coloco a declaração clear: right, a caixa 4 ficara a baixo da caixa 3.
Entendido ;)
Hiroshi Valeu pelo código ;)