CSSで親ボックスに背景（色または画像）をつけても、子ボックスでfloatさせていると、親ボックスの背景は子ボックスの下まで表示されません。これが仕様なのはわかるんですが、そこを何とかしたいのが人情というもの。
回避策をえっらい長い時間考えていたのですが、検索してみたらあっさり見つかってしまいました。
おかげで今日はもう眠れます。
「CSSで段組したらFirefoxで背景が出ねーよっ」て話をよく聞くので色々試してみました。
CSSでfloatを指定したボックスを含むボックスの背景が出なくなる件 – Fsiki
ミソはoverflowの仕様です。
height の値が auto で overflow の値が visible
以外のブロック要素が、そのマージン下辺よりも下にくるようなフロートを子に持つならば、その高さはフロートを含むように広げられる、すなわち、フロート
の親ボックスが高さの算出時に子のフロートを含めないのは、親ボックスの overflow の値が visible のときに限るのです。
CSSによる段組（マルチカラム）レイアウト講座 基礎編5 フロートの性質
generated by feedpath