block formatting contexts
A block formatting context is a box that satisfies at least one of the following:
- the value of “float” is not “none”,
- the used value of “overflow” is not “visible”,
- the value of “display” is “table-cell”, “table-caption”, or “inline-block”,
- the value of “position” is neither “static” nor “relative”.
By spec, it is the border box of the pink box that sits next to the float, not its margin box. Negative margin would not make the pink box overlap the yellow box. Also, to create a gap between the yellow and pink boxes, we would need to set a margin value greater than margin box of the floated boxes.
Space between floats and non floated boxes should be created via margin on the floats.
Style the pink box with:
height: 33%;