Curious why?
The reason lies in the behavior of the float property.
Applying the float property to an element doesn't dictate how that specific element should be displayed, but rather influences the flow of content around it.
Specifically, this affects inline content following the floated element.
Since your paragraphs are block elements with fixed dimensions (50px width and height), the visible outcome is as follows: the inline content of paragraph #p2 wraps around paragraph #p1, but the constraints on the parent element prevent it from expanding accordingly.
Edit:
If you're struggling to grasp the concept, consider a simplified example:
#floated {
float:left;
width: 50px;
height: 50px;
border:1px solid red;
}
#unfloated {
border:1px solid blue;
background: green;
}
<div id="floated"></div>
<div id="unfloated">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
As evidenced above, without a background for the floated element, the non-floated div stretches underneath it, allowing only its inline content - the Lorem Ipsum text - to wrap around the floated element.
This exemplifies the essence of how float works.
In your scenario, the appearance of "B" inside the second square occurs because the parent block element restricts the width and height to 50px, preventing it from enclosing "B"; thus, the text overflows the parent element boundaries due to the default overflow:visible.