回り込みを解除しよう！（clear プロパティ）

使用プロパティセレクタ { clear: 解除; }

CSS一覧プロパティ辞典 … clear プロパティ

clear プロパティを使うと、float プロパティで回り込みを適用した要素の効果を解除できます。left（左寄せを解除）、right（右寄せを解除）、both（両方を解除）、none（解除しない）、のいずれかで指定します。また、clear プロパティを指定できるのはブロック要素だけです。
br 要素の clear 属性と同じ効果を与えますが、clear 属性は推奨されない属性です。

使用例

float プロパティを使用し、画像を右側に指定し、テキストを左側に回りこませた使用例を、新しく p 要素で段落を作成するたびに回り込みを解除するように設定しています。画像は同じフォルダ内のファイルを参照するとして、相対パスで指定しているので、ファイル名（ここでは「haikei1.gif」）をそのまま記述します。なお、使用画像は下の画像を使用しています。また、img 要素にクラス名を指定し、その画像のみに回り込みを指定しています。

記述例
<html> <head> <title>一人暮らしの前向き料理</title> <style type="text/css"> body { text-align: center; } h1 { background-color: orange; padding-top: 10px; paddimg-bottom: 10px; } span{ font-weight: bold; } p { line-height: 1.7em; clear: right; } img.mawarikomi { float: right; } p.copy{ font-family: "ＭＳＰ明朝",serif; } </style> </head> <body> <h1>簡単に作れるワンポイント料理</h1> <p><img src="haikei1.gif" class="mawarikomi" alt="one" width="250" height="180">料理を少しおいしくするためのワンポインを紹介します！</p> <p>おいしいチャーハンの作り方</p> <p class="copy">Copyright © 2007 TomMY. All Rights Reserved.</p> </body> </html>

使用例の表示

[clearプロパティ適応前のブラウザでの表示例]
一人暮らしの前向きな料理
簡単に作れるワンポイント料理料理を少しおいしくするためのワンポイントを紹介します！おいしいチャーハンの作り方 Copyright © 2007 TomMY. All Rights Reserved.

[clearプロパティ適応後のブラウザでの表示例]
一人暮らしの前向きな料理
簡単に作れるワンポイント料理料理を少しおいしくするためのワンポイントを紹介します！おいしいチャーハンの作り方 Copyright © 2007 TomMY. All Rights Reserved.