clearの使い方

clearの使い方「CSS講座」

clearはfloatと一緒に使用します。floatは要素の回り込みを実現するためのもので、clearを指定することでfloatの回り込みを解除することができます。

clearプロパティ

{clear:値;}

☆説明

「float」による回り込みの解除をします。

「float」プロパティの最後には必ず「clear」プロパティを記述して回り込みの解除をしましょう。

機能
both 両方の回り込みを解除する。こちらを指定すれば右回りも左回りも解除できます。
left 左の回り込みを解除する。
right 右の回り込みを解除する。

ボックスA

ボックスB

ボックスC

☆説明
上の例では、ボックスAにfloat:leftを指定していますので、以降のボックスは左に回り込んで表示されていきます。
それを回避するために、ボックスCに「clear:both」を指定しています。これを指定しなければボックスCも右まわりで回り込んで表示されます。

floatとclearは一緒に使うと覚えておきましょう。

floatについてはこちらの記事をご確認ください。floatの表示がくづれるときの直し方!

  1. シェアする
  2. facebook
  3. Twitter
  4. google+
  5. はてなブックマーク
  6. pocket
  7. feedlyを購読