| プロパティ名 | 値 | 適用対象 | 継承 |
|---|---|---|---|
| float: | 回り込み方法 | すべての要素(例外有り) | なし |
| 値 | 説明 | |
|---|---|---|
| 回り込み方法 | left | ボックスの領域を左に寄せて、 続く文字列を右側に配置します。 |
| right | ボックスの領域を右に寄せて、 続く文字列を左側に配置します。 | |
| none | 回り込みを行いません(デフォルト)。 |
文字列の回りこみは、floatプロパティで指定します。回り込みとは、対象となるボックス領域を左または右に寄せて、空いた反対側の領域に文字列を配置することです。回り込み方法には、left,right,noneのいずれかを指定します。
floatプロパティをimg要素に指定して使用する以外は、widthプロパティでボックス領域の幅を指定しておく必要があります。
floatプロパティで指定した回り込みを解除するには、clearプロパティを使用します。回り込みを解除すると、通常の状態に戻り、回り込みが設定されている要素の下側に文字列が表示されるようになります。
floatプロパティをimg要素に指定して使用する以外は、widthプロパティでボックス領域の幅を指定しておく必要があります。
floatプロパティで指定した回り込みを解除するには、clearプロパティを使用します。回り込みを解除すると、通常の状態に戻り、回り込みが設定されている要素の下側に文字列が表示されるようになります。
サンプルソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<style type="text/css">
<!--
img.right{float: right;}
img.left{float: left;}
.sampl01{color:blue;}
hr{clear: both;}
p{color:red;
font-size:1.2em;
text-align:center
}
-->
</style>
</head>
<body>
<img src="画像ファイル" class="left">
<div class="sampl01">鹿苑寺（ろくおんじ）は、京都市北区にある臨済宗相国寺派の寺院。
寺名は足利義満の法名にちなむ。通称金閣寺（きんかくじ）、山号は北山（ほくざん）。
1994年（平成6年）に古都京都の文化財として世界遺産に登録された。中心となる建築物である舎利殿を
「金閣」、寺院全体を「金閣寺」と通称する。
<p>「float:right」で、画像を左側に配置して、文字列を画像の右側に表示。</p>
</div>
<hr>
<img src="画像ファイル" class="right" >
<div class="sampl01">鹿苑寺（ろくおんじ）は、京都市北区にある臨済宗相国寺派の寺院。
寺名は足利義満の法名にちなむ。通称金閣寺（きんかくじ）、山号は北山（ほくざん）。
1994年（平成6年）に古都京都の文化財として世界遺産に登録された。中心となる建築物である舎利殿を
「金閣」、寺院全体を「金閣寺」と通称する。
<p>「float:left」で、画像を右側に配置して、文字列を画像の左側に表示。</p>
</div>
<hr>
<p>hr要素に「clear: both」を指定して回り込みを解除。</p>
</body>
</html>
