明確なCSSプロパティは、CSS1以降のCSSの一部です。 クリアされた要素の横にどんな要素が浮かんでいるのかを指定できます。 clearプロパティには5つの値があります。
- なし
- 左
- 右
- どちらも
- 継承する
CSSのクリアプロパティの使用方法
clearプロパティを使用する最も一般的な方法は、要素にfloatプロパティを使用した後です。 例えば：
画像の横にあるテキスト。
私のイメージの下にあるテキスト。
すべての要素のデフォルトはclear：none; 他の要素を何かの上に浮かべたくない場合は、クリアスタイルを変更する必要があります。
フロートをクリアしているときは、フロートにクリアを合わせます。 したがって、左に要素をフローティングした場合は、左にクリアする必要があります。 フローティングされた要素は浮動し続けますが、クリアされた要素とその後のすべてがWebページの下に表示されます。
左と右の両方に浮動する要素がある場合、片側だけをクリアすることも、両方をクリアすることもできます。
Layoutsでのクリアの使い方
ほとんどのデザイナーがclearプロパティを使用する最も一般的な方法は、ページ要素のレイアウトです 。 テキストのブロック内に画像が浮かんでいて、 画像の下に次の段落を挿入したい場合や、別のテキストの横に浮かべたいテキストの列全体を下に表示することもできます。
このフォームのレイアウトのHTMLは次のとおりです。
1つのdivコンテナに別のコンテナがあり、左側にフローティングされています。
短い浮動小数点div
float divの右側にあるコンテナdiv内の内容。
これは正常に動作し、短いdivはメインdivの内容の残りの部分に左に浮動します。
フロートしたボックスの隣にあるテキストをクリアするには、フロートしたボックスの下に書き始めたい場所にタグを追加するだけです。
しかし、問題は、フローティングボックスがその横のコンテンツよりも長い場合に発生します。 そして、あなたが見ることができるように、メインボックスの背景色は、フローティングボックスの底に運ばれません。
幸いにも、これを修正する簡単な方法があります：プロパティ。 メインボックスをオーバーフローに設定すると、auto; この例に示すように、背景色は、より長い浮動小数点数のボックスのすぐ下に残ります。