html - Why does the float-right element not go all the way to the top? -

i know happens, clarification why, i'm trying better understanding of float mechanic

given html

<div class="wrapper">   <div class="inner first">1</div>   <div class="inner second">2</div>   <div class="inner third">3</div> </div> 

and css

.wrapper {   width: 500px;   height: 500px;   margin: 100px auto;   border: 1px solid black; }  .inner {   border: 1px solid black;   box-sizing: border-box; }  .first, .second {   float: left;   width: 300px;   height: 300px; }  .third {   width: 200px;   height: 200px;   float: right; } 

the third div not float way top right, aligns second div

i know happens more specific explanation why (based on rule)

good question, have seen people having difficulty understanding this. per question, feel want align '3' top-right in box. inner 500 * 500, , first , second 300*300, since cannot fit total of 600, second 1 go below first one. there space of 200 third one. take next 200 space (next second one) , space above not utilized. desired output, want shift 3 shown below space of 200 in top right utilized first.

may can you:

  <div class="wrapper">   <div class="inner third alg">3</div>   <div class="inner first">1</div>   <div class="inner second ">2</div>   </div> 

css code:

.wrapper {   width: 500px;   height: 500px;   margin: 100px auto;   border: 1px solid black; }  .inner {   border: 1px solid black;   box-sizing: border-box; }  .first, .second {   float: left;   width: 300px;   height: 300px; }  .alg{   text-align: right; }  .third {   width: 200px;   height: 200px;   float: right; } 

i hope makes things more clear now. if not comment below, can explain more examples.