clearはfloatと一緒に使用します。floatは要素の回り込みを実現するためのもので、clearを指定することでfloatの回り込みを解除することができます。
clearプロパティ
{clear：値；}
☆説明
「float」による回り込みの解除をします。
「float」プロパティの最後には必ず「clear」プロパティを記述して回り込みの解除をしましょう。
| 値 | 機能 |
|---|---|
| both | 両方の回り込みを解除する。こちらを指定すれば右回りも左回りも解除できます。 |
| left | 左の回り込みを解除する。 |
| right | 右の回り込みを解除する。 |
ボックスA
ボックスB
ボックスC
.boxA{
float:left;
border:1px solid gray
width:200px;
height:200px;
}
.boxB{
float:left;
border:1px solid gray
width:200px;
height:200px;
}
.boxC{
clear:both;
border:1px solid gray
width:400px;
height:30px;
}
ボックスA
ボックスB
ボックスC
☆説明
上の例では、ボックスAにfloat:leftを指定していますので、以降のボックスは左に回り込んで表示されていきます。
それを回避するために、ボックスCに「clear:both」を指定しています。これを指定しなければボックスCも右まわりで回り込んで表示されます。
floatとclearは一緒に使うと覚えておきましょう。
floatについてはこちらの記事をご確認ください。floatの表示がくづれるときの直し方！
