CSSでfloatを指定したボックスを含むボックスの背景が出なくなる、のをどうにかしたい

CSSで親ボックスに背景(色または画像)をつけても、子ボックスでfloatさせていると、親ボックスの背景は子ボックスの下まで表示されません。これが仕様なのはわかるんですが、そこを何とかしたいのが人情というもの。

回避策をえっらい長い時間考えていたのですが、検索してみたらあっさり見つかってしまいました。
おかげで今日はもう眠れます。

「CSSで段組したらFirefoxで背景が出ねーよっ」て話をよく聞くので色々試してみました。
CSSでfloatを指定したボックスを含むボックスの背景が出なくなる件 – Fsiki

ミソはoverflowの仕様です。

height の値が auto で overflow の値が visible
以外のブロック要素が、そのマージン下辺よりも下にくるようなフロートを子に持つならば、その高さはフロートを含むように広げられる、すなわち、フロート
の親ボックスが高さの算出時に子のフロートを含めないのは、親ボックスの overflow の値が visible のときに限るのです。
CSSによる段組(マルチカラム)レイアウト講座 基礎編5 フロートの性質

  generated by feedpath

この記事を書いた人

いがらしたけし