clearでボックスの回り込みを解除する【CSS】

clearプロパティは、floatプロパティによるボックスの回り込みを解除するプロパティです。

floatプロパティは、要素を左に寄せたり右に寄せたりするときに使うプロパティです。

このfloatプロパティを使うと、あとに続く要素は反対側に回り込むようになっているのですが、回り込まないようにしたいときにclearプロパティを使います。

関連記事
『floatでボックスの回り込み位置を指定する【CSS】』

値の指定方法

clearプロパティでは、以下のような値を指定できます。

floatプロパティで画像を右寄せ（right）で配置しているので、あとに続く内容は左側に回り込みます。
clearで回り込みを解除しない場合は、段落が変わっても回り込みます。

floatプロパティで画像を右寄せ（right）で配置しているので、あとに続く内容は左側に回り込みます。

clearで回り込みを解除した場合は、このように回り込まなくなります。

画像にfloatプロパティでrightを指定して右寄せに配置しているので、あとに続く文章は左に回り込むのですが、赤文字になっている箇所は、clearプロパティでrightを指定することで、回り込みを解除しています。

極端に言えば、文章全体にclearプロパティを適用させると次のようになります。

floatプロパティで画像を右寄せ（right）で配置しているので、通常はあとに続く内容は左側に回り込みますが、clearで回り込みを解除した場合は、このように回り込まなくなります。

文章の回り込みを解除しているので、画像の左側ではなく下に文章が表示されているのがわかります。