floatしないと幅を狭くしても下の要素は上に入り込めないのか

あるサイトの模写をしていました。
ヘッダーでh１を左側、pらを右側に寄せ、同じくらいの高さで揃えようとしました。
.header-pクラスをfloat:right;に設定したところ、右側に寄ったのですが、h１の下側までの高さにしかなりませんでした。そこでh１の幅を狭くすれば、.header-pの上側の部分が空き、その部分まで高さが上がるのではと考えたのですが、変わりませんでした。結局、h１にfloat:left;の設定をしたところ解決しました。何故、幅を狭くしただけではダメだったのでしょうか。```HTML
コード

      <header>
        <h1><i class="fas fa-tooth"></i>Dental Clinic</h1>
        <div class="header-p">
            <p class="subtitle">”地域に基づいた歯科医院”デンタルクリニック</p>
            <p class="number"><i class="fas fa-phone-volume"></i>03-0000-0000</p>
            <p class="hours">予約受付時間　10：00〜19：00　<span>日祝休診</span></p>
        </div>
      </header>
    
  </body>

```CSS
コード
```header h1{
    border: 1px solid black;
    width:300px;
    margin-top: 50px;
}

.header-p{
    float:right;
    border: 1px solid blue;
    margin-right: 150px;
    margin-bottom: 70px;
}

.number{
    font-size: 30px;
}

.hours{
    border:1px solid black;
}

.hours span{
    color:red;
}