フロートの直後に空要素を設置すれば解決

clearを指定した空要素をそれぞれの末尾に追加することで、親要素の背景色もマージンも正しく反映されています。
しかし、見栄えのためにHTMLの文書構造を汚すのは好ましくありません。