Gostaria de mais explicações, não entendi muito bem o exercício.
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 ;)