overflow: hidden on a parent full of floats makes it wrap around them, which reads like a side effect of clipping and has nothing to do with clipping. The declaration establishes a new block formatting context, and a formatting context contains the floats inside it. Clearing is the visible consequence of a layout rule that has a name.
/* the parent collapses to zero height: floats do not count towards it */
.card { border: 1px solid #ddd; }
.card__thumb { float: left; }
/* any one of these establishes a BFC, and the parent contains them */
.card { overflow: hidden; }
.card { display: inline-block; }
.card { display: table; }
.card { float: left; }
/* the same rule used the other way round: a sibling that keeps
clear of the float instead of flowing underneath it */
.media__body { overflow: hidden; }The second use is the more valuable one. A block box next to a float normally has its own box slide underneath while only its line boxes are pushed aside, which is why a long caption wraps under the image and a short one does not. Giving that box a formatting context stops it: the box itself keeps clear, so the text column has a straight left edge at any length, and the whole media-object pattern is that one declaration. The cost is in the name. Anything that overflows is now clipped, so a dropdown, a tooltip or a box-shadow that used to spill out of the card no longer can. display: table avoids the clipping and brings shrink-to-fit width instead; a clearfix pseudo-element avoids both at the price of an extra rule.