解 説

ネガティブマージンは設定する方向で違った動きをします。
margin-leftとmargin-topはマージンを設定した要素がその方向へ動きます。
margin-rightとmargin-bottomの場合はマージンを設定した要素は動かずにその後に続く要素に影響を及ぼします。
それぞれのネガティブマージンを通常フローに設定した場合とフロートに設定した場合、そして入れ子状態の要素の動きのシミュレーションを作成しました。