Regarding float, MDN says:
The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).
But it does not expand on that at all.
So I did a simple experiment. It seems when the floated element has an inline sibling, it is still part of the normal flow, allowing text and inline elements to wrap around it. But for block siblings, the floated element collapsed to have a zero height.
This behavior is further confirmed in the spec. For content (inline elements I guess?) -
The most interesting characteristic of a float (or "floated" or "floating" box) is that content may flow along its side (or be prohibited from doing so by the 'clear' property). Content flows down the right side of a left-floated box and down the left side of a right-floated box.
And for block boxes -
Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist.
This does not feel intuitive nor consistent. Why was this design choice?