Why does this happen when I float left the content of div element and the content goes out of the border i dont know the solution and why this happen?

Question

i have div element that has a class box and some content inside it.

  <div class="box">
    <h1>stack overflow</h1>
    <p>Lorem ipsum dolor sit a.  facilis  error! At, magnums quos ipsum, pianissimos .</p>
    </div>

as soon as i float left the content of the div, the content go out of the border. i need a clear explanation of why this happens. thank you!

.box{
  width: 800px;
  margin: 150px auto;
  border: 3px solid;
}
.box h1,p{
  margin: 5px;
  float: left;
}