wrapperの背景色が適用されなくて、でも高さは指定したくない時に解決するCSS

更新日：2018年2月24日

<body>以下の全ての要素を<div>で囲み、wrapperという名前を付けてからウェブサイトを作り始める方は多いですよね。とてもオーソドックスな作り方です。

そのwrapperに背景色を指定して、その中に<div>等を作ったりして色々していく内に、
「あれ？wrapperの背景色途中で消えてない？」
って気付く時ありませんか？
実はwrapperに高さを指定すれば解決するのですが、今回は高さは指定したくないんだよねってパターンって意外にあるんですよね。

そういう場合は十中八九、floatが犯人です。
何処かでfloatを使っていませんか？
floatを使っている要素を囲っている親要素の<div>等に下記のCSSを追記してあげて下さい。

.hoge {
	overflow: hidden;
	position: relative;
	zoom: 1;
}

なんてことないfloatをクリアしているだけなのですが、これが結構効きます。
clear: both;をしても上手くいかなかったなんて時に、この方法を試してみるとすんなり上手くいくことも多いので、覚えていて損のない記述だと思います。

是非お試し下さい。

人気記事