/*
When child elements (boxes) are floated, the parent is unable to determine
its height and collapses to the height of non-floating content.
<div class="container" style="background:orange">
<div class="child"> <img src=''> </div>
<div class="child"> </div>
</div>
Workaround: if we add some content, you will see the container regains its height
.container :: after {
content: 'M';
}
But ofcourse, thats not an ideal solution
Ideal solution is add a class "clearfix" to the container element
which adds empty content before & after child elements
*/
.clearfix:before, .clearfix:after {
content : " ";
display: table;
}
.clearfix:after {
clear: both;
}
/* Note: Flex layouts don't have this problem and need no work around*/