A float overflows its container's bottom edge because the container has no clearance. Adding `display: flow-root` to the container fixes it. What does flow-root do at the box-model level that `overflow: hidden` also did, but without clipping?
.container { display: flow-root; }