As I delve into the world of web development, the concept of floating has left me perplexed. Take a look at my code snippet below:
.test {
background-color: red;
height: 200px;
width: 200px;
float: left;
}
.test1 {
background-color: blue;
height: 200px;
width: 200px;
}
<div class="test">Box 1</div>
<div class="test1">Box 2</div>
The snapshot of its rendering in a browser can be viewed here.
I'm confused as to why text Box 2 is positioned beneath the red box, while part of the blue box seems to be overlapping with the red box. As far as I understand, both boxes should align vertically and have the red box covering the blue one.