Behavior of an inline-block list with floats

Question

I have a list of 3 items, all items are behaving like inline-block, however I gave the first and last item float: right and float: left, respectively.

The question is, why the middle item (box-2) was not over put by the item on the left since it is in a new context? How it continues to be rendered with background and box size?
It wasn’t meant to be blown by 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>

Answer 1

I think maybe your doubt is because you didn’t understand what the display: inline-block;... Inline-Block means that the element is inline in relation to the brethren, however, from within it behaves as block.

So for having a outset element inline he respects and follows the flow text, we are a span. However, the inset his is block, it can receive property from an element block as width and height.

See the same span case

span {
  width: 100px;
  height: 100px;
  margin: 30px;
  background-color: red;
}

  

<span>inline</span>
<span style="display:inline-block">inline-block</span>

This question can also help you understand some relative things and float and inline-block Float vs. inline-block. What are the advantages and disadvantages of each?