CSS Float Question (Strange behaviors found)

Dears,

Below is my simple float program and I also attach a picture of the result. My question is: When the width in class “two” is 300px, the div 2 is moved next to the floated div 1, this is also my expectation. However, when i changed the width in class “two” from 300px to 200px, div 2 is kept under div 1, and div 3 is moved to overlap with div 2 (see the attached picture) Why? enter image description here

<html>`
<head>
<style>
.one{
    background: yellow;
    width: 200px;
    height: 50px;
    text-align: center; 
    box-shadow: inset 0 0 10px #000;
    Float: left;
    }

.two {
    background: rgb(55, 0, 255);
    width: 300px;
    height: 50px;
    text-align: center; 
    box-shadow: inset 0 0 10px #000;  
  }

.three {
    background: rgb(255, 0, 76);
    width: 200px;
    height: 50px;
    text-align: center; 
    box-shadow: inset 0 0 10px #000;
   }
 </style>
 </head>
 <body>
    <div class = "one">1</div>
    <div class = "two">2</div>
    <div class = "three">3</div>
 </body>
 </html>