Why does the center div have to be last?

See more:

HTML

So I'm curious, is there a way to get the div layout to be Left, Center, Right without having to put the centered div last? And no, I'm not looking for a Bootstrap solution, I'm just trying to figure this out with divs, to learn the basics. :)

What I have tried:

Given this:

<div style="width:100%">  
  <div style="float:left">Left</div>
  <div>
      <div style="float:right">Right</div>
      <div style="text-align:center;">Left, centered text, and right.  Note that the centered text must come last!</div>  
    </div>
</div>

Works great. But how is the layout engine working, because if I put the centered text before the float:right, like this:

<div style="width:100%">  
  <div style="float:left">Left</div>
  <div>
      <div style="text-align:center;">Left, centered text, and right.  Note that the centered text must come last!</div>  
      <div style="float:right">Right</div>
    </div>
</div>

Then "Right" appears on the next line. OK, that makes sense, but if I try float:left or display:inline the centered text doesn't center.