Propriedade float e vários blocos em CSS
Suponha que agora, no código HTML, existam não um,
mas dois divs filhos, e a ambos seja aplicado float
com o valor left. Vamos ver o que acontece:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
some long text
</div>
.parent {
border: 1px solid red;
text-align: justify;
}
.child {
float: left;
width: 200px;
height: 100px;
border: 1px solid green;
}
:
Então, como podemos ver, os dois blocos filhos se alinharam em linha, sendo que o primeiro bloco no código HTML será posicionado à esquerda.
Agora, vamos escrever o valor right
em vez do valor left. Neste caso,
os blocos flutuarão para a direita, e a ordem
deles será invertida em comparação com
a ordem no código HTML:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
some long text
</div>
.parent {
border: 1px solid red;
text-align: justify;
}
.child {
float: right;
width: 200px;
height: 100px;
border: 1px solid green;
}
:
