display: flow-root
A flow-root is a plain block that establishes its own formatting context: it contains its floats and its margins do not collapse with its children's, without clipping anything the way overflow: hidden does.
A plain block does not contain its float: the box below is only as tall as its text.
float
text beside the float
the next block starts beside the float's overhang
display: flow-root: the same box now grows to cover the float.
float
text beside the float
the next block starts below the float
Margins: the 5pt margin and the child's 20pt margin add inside a flow-root (35pt), and collapse to the larger (20pt) in a plain block.