CSSのクリアプロパティの理解

ザ クリア CSSプロパティはCSS1以降のCSSの一部です。クリアされた要素の横にどんな要素が浮かんでいるのかを指定できます。ザ クリア プロパティには5つの値があります：

• 無し
• 左
• 右
• 両方
• 継承する

CSSのクリアプロパティの使用方法

使用する最も一般的な方法 クリア あなたが 浮く プロパティを設定します。例えば：

• 画像の横にあるテキスト。
• 私のイメージの下にあるテキスト。

すべての要素のデフォルトは クリア：なし;他の要素を何かの上に浮かべたくない場合は、 クリア スタイル。

フロートをクリアしているときは、フロートにクリアを合わせます。したがって、左に要素をフローティングした場合は、左にクリアする必要があります。フローティングされた要素は浮動し続けますが、クリアされた要素とその後のすべてがWebページの下に表示されます。

左右に浮動する要素がある場合は、片側だけをクリアすることも、クリアすることもできます 両方.

Layoutsでのクリアの使い方

ほとんどのデザイナーが最もよく使う方法 クリア プロパティはページ要素のレイアウトにあります。テキストのブロック内に画像が浮かんでいて、画像の下に次の段落を挿入したい場合や、別のテキストの横に浮かべたいテキストの列全体を下に表示することもできます。

このフォームのレイアウトのHTMLは次のとおりです。 1つのdivコンテナに別のコンテナがあり、左側にフローティングされています。

短い浮動小数点div

float divの右側にあるコンテナdiv内の内容。

これは正常に動作し、短いdivはメインdivの内容の残りの部分に左に浮動します。

フロートしたボックスの隣にあるテキストをクリアするには、フロートしたボックスの下に書き始めたい場所にタグを追加するだけです。

しかし、問題は、フローティングボックスがその横のコンテンツよりも長い場合に発生します。そして、あなたが見ることができるように、メインボックスの背景色は、フローティングボックスの底に運ばれません。

幸いにも、これを修正する簡単な方法があります：プロパティ。メインボックスを オーバーフロー：自動; この例に示すように、背景色は、より長い浮動小数点数のボックスのすぐ下に残ります。