clearの重要性


このエントリーをはてなブックマークに追加

floatプロパティは、指定された要素を左または右に寄せて配置する際に使用します。 後に続く内容は、その反対側に回り込みます。

引用元:float-HTMLクイックリファレンス

何かボックスなどを左寄せに並べたり、メニューバーを作る時に「float」というプロパティを多く使用するかと思います。
しかし、間違った手法で「float」を使うことで、背景が表示されなかったり、レイアウトが崩れてしまう問題など
予想できない問題が数多く起きます。

その問題を解決するためには、floatを解除する「clear」というプロパティが重要になってきます。

clearの概念

<div id="content_bg">
   <div id="content_main"></div>
   <div id="content_sub"></div>
</div>
#content_bg {
background: #eee;
width: 960px;
height: auto;
}

#content_main {
background: blue;
width: 900px;
height: 300px;
}

#content_sub {
background: yellow;
width: 60px;
height: 300px;
}

このようなソースがあるとする。この場合、下記のような表示になってしまうことが多い。
それを解除するのが「clear」というプロパティである。
float_before

<div id="content_bg">
   <div id="content_main"></div>
   <div id="content_sub"></div>
   <!--clear--><div class="clear"></div>
</div>
/*中略*/

.clear {
 clear: both;
}

このように指定してあげることで、上手く表示されていなかった背景色がしっかりと表示されるようになるのである。
float_after

まめちゃんのまとめ

  • clearを解除することで、最後までしっかり表示される!
  • 「float」を使ったレイアウト崩れの時は、とりあえず使ってみよう!