Why div element do not move upwards when the div above it is floated left?

i have been studying float property in css. This is my html code:

<style>
    .left{
        float:left;
        text-align:center;
        width:25%;
    }
    .normal{
        text-align:center;
        width:25%;
    }
<div class="left">
    <img src="Icon.png">
    <h1>hi my name is left</h1>
    <p>hi im a paragraph of abcd. ghjtyj yttyrkutk ukuykyilt uk</p>
</div>
<div class="normal">
    <img src="Icon.png">
    <h1>hi my name is normal</h1>
    <p>hi im a paragraph of abcd. ghjtyj yttyrkutk ukuykyilt uk</p>
</div>

i want to know why my div with class normal is not moving upwards with the div of class left?

I asked this question because if i write a

<p>something</p>

after my div of class left the content of p tag moves upwards but this is not happening with a div.. I want to why this is happening?