Tenho uma lista com 3 itens, todos os itens estão se comportando como inline-block, contudo, dei ao primeiro e a o último item float: right
e float: left
, respectivamente.
A pergunta é, por que o item do meio (box-2
) não foi sobre posto pelo item da esquerda já que ele está em um novo contexto?
Como continua sendo renderizado com background e tamanho de caixa?
Não era pra ele ser sopre posto pela box-1
?
.caixa{
width: 25%;
height: 150px;
display: inline-block;
}
.box-1{
background: #F54958;
float: right;
}
.box-2{
background:#ED49F5;
float: left;
}
.box-3{
background: #EB5A46;
}
<ul class="lista">
<li class="caixa box-1">Primeiro</li>
<li class="caixa box-2">Segundo</li>
<li class="caixa box-3">Terceiro</li>
</ul>