HTML
<body>
<div class="parent">
<div class="red">1</div>
<div class="green">2</div>
</div>
</body>
Styles
.red {
width: 150px;
height: 150px;
background-color: red;
}
.green {
width: 150px;
height: 150px;
background-color: green;
}
.parent {
background-color: yellow;
}
Output
When I add float left to red class, I am getting the below output.
May I know why the content of green div is overflowing outside of the parent div when I float the red div?
