h1などのmargin部分の背景だけが抜けてしまうのは悲しい。でもバグではない。
float や position がデフォルトのボックスに関して、
上マージンが指定されている要素の先祖要素が、ボーダーかパディングを正値で持っていない場合、上マージンはその要素ではなく、先祖要素の上マージンとして振る舞われます。
理想を実現するには、その要素に対する上マージンではなく、その要素の先祖要素に対して上パディングを与えるか、間にボーダーかパディングを挟む必要があります。（引用元）
とあり、頭が混乱。ちなみに、引用元はfloatしたときに子ボックスが親ボックスから下方向に飛び出る話。
でも、自分が苦しんでいるのは、右の例のように子ボックスの上にできる背景が抜けちゃった空間。
h1の上マージン部分の分だけ、floatボックスも落ちるので、floatでサイドメニューを出すようなレイアウトの時にひっかかる。
解決方法は、floatしているボックスの親にあたるボックスに正の数でpaddingが設定されていればいい。でも0にしたい。
ということで、試しにpadding-top: 0.01pxを入れたら成功。
限りなく0に近いけど、0ではだめだし、0.001pxもだめだった。
これまで、h1のmarginを消して、かわりにボックスにpaddingを設定して、負け犬のごとく回避していたけど、こんな方法もあったことにようやく気がついて、幸せを感じたので、メモをしてみた。