Within this design, there are 3 boxes arranged in a row using the float: left; property for each one.
These boxes are contained within 2 other elements. Typically, these containers collapse due to the content being comprised of floated items.
However, changing the display value of the 2 containers to inline-block prevents collapsing from occurring.
What is the reason behind this behavior?
I do understand that utilizing float for horizontal alignment is not recommended and that a more modern approach would involve using flexbox or grid. However, I accidentally came across this setup and was intrigued by the reasoning behind it.
.container {
background: tomato;
display: inline-block;
text-align: center;
width: 100%;
}
ul {
background: yellow;
display: inline-block;
list-style-type: none;
padding: 1.5rem;
}
.box {
border: 3px solid black;
float: left;
height: 100px;
width: 100px;
}
.box-1 {
background: aquamarine;
}
.box-2 {
background: yellowgreen;
}
.box-3 {
background: pink;
}<div class="container">
<ul>
<li class="box box-1"></li>
<li class="box box-2"></li>
<li class="box box-3"></li>
</ul>
</div>