The answer to “why” is described well and succinctly here. There are certain properties that establish a “block formatting context”. Namely:
Floats, absolutely [and fixed] positioned elements, block containers (such as
inline-blocks, table-cells, and table-captions) that are not block
boxes, and block boxes with ‘overflow’ other than ‘visible’ (except
when that value has been propagated to the viewport) establish new
block formatting contexts for their contents.
It is this change of block formatting context that is the reason why such solutions as given above in the comments work for how margin
(and in the case of a preceding float
, padding
of following inflow elements) operates.