It is possible to use float correctly so that the floated elements fill the space in the parent element and ensure the parent element takes the size of its floated children.
.parent {
overflow: hidden;
}
.child {
float: left;
}
.another_child {
float: left;
}
<div class="parent">
<div class="child"></div>
<div class="another_child"></div>
</div>
Explanation: The W3c spec states overflow: hidden means "... the content is clipped and that no scrolling user interface should be provided to view the content outside the ... region".
In other words the browser is not allowed to draw the content outside the containing box. It seems that browser implementers have chosen to expand the box to fit the contents instead of clipping the contents. This is clearly a sensible choice when the containing box has no specific size.