Why is the background of my box not shown? - html

Question

I am at a loss at the current problem. I wanted to position three boxes with HTML/CSS, two at the left, one at the right. To mark the area of the boxes, I have chosen three different backgrounds: red, green, and blue. Everything works, but the blue background is not shown. I think I must have made a really stupid mistake, but I can't find it.
Here is the HTML:
.boxupperleft {
float: left;
width: 50%;
height: 100px;
background: red;
}
.boxright {
float: right;
width: 50%;
height: 200px;
background: green;
}
.boxlowerleft {
width: 50%;
height: 100px;
background: blue;
}
<div class='boxupperleft'>
<p>Text1</p>
</div>
<div class='boxright'>
<p>Text3</p>
</div>
<div class='boxlowerleft'>
<p>Text2</p>
</div>
Bonus points for explaining why Text1 and Text3 are not at the top of the box, but Text2 is.
Edit: I just found out that the background is there when I add "float: left" to the definition of "boxlowerleft", but this still doesn't make sense to me. Why does the background need a float?

Answer 1

#Temani Afif made a comment with very useful links to explain float behavior (this and this). There are examples in those post to demonstrate how float works. You should check them out.
As for your specific problem:
Why doesn't the blue background appear?
To cite the docs again:
The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow.
What happens here is that because the red and green boxes are floated, the blue div (which is a display: block element) will be rendered as if those 2 boxes are not there (it ignore them). Coincidentally you have set it to have the exact same size as the red box, so the blue box is rendered behind and is hidden by the red box.
The text inside it, though, is an inline text, so it is wrapped around the red and green boxes, and thus get pushed down (out of) the blue box, to below the red box.
When you add float: left to the blue box, it now recognize the red box (they're both floated) and get pushed down by it, making it visible.
Why do Text1 and Text3 not at the top, but Text2 is?
That's because all of your texts are also inside a <p> element. <p> has a default top and bottom margin so they have some spacing from the top of the boxes.
But <p> itself is also a display: block; element, so it is also rendered as if the red box is not there. The result is that its top margin is at the top, above the red box, creating an empty white space. The text inside it (Text2), is wrapped by the red box to the next line, and since there's no margin there, it touches the red box.