(01) 「この公園には…」の段落からは回り込みが解除されるように設定します。この段落を前の段落と区別するためにclass属性を設定します。この段落のclass属性を「kaijo」としてください。
<body> <h1>近所の猫</h1> <p><img src="neko01.jpg" width="96" height="125" alt="昼寝している猫" />近所の公園で撮影した猫です。お昼寝の最中でしたがとってもかわいかったのでつい写真に収めてしまいました。暑い日だったので木の上でお昼寝をしていたようです。</p> <p class="kaijo">この公園には沢山の猫がいます。誰かが餌を与えているんでしょうか？みんな丸々太っています。それにしても気持ちよさそうに寝ていますね。</p> </body>
(02) 次にCSS側で、class属性が「kaijo」の段落からは回り込みが適用されないように設定します。回り込みの解除は「clear」プロパティで設定します。使用可能な値は、「float」プロパティと同じです(bothも利用可)。CSSを以下のように更新してからブラウジングしてください(＊はすべての要素の意味、省略も可能)。
body{
background-color:#FFFFCC;
}
h1{color:#0000FF;
border:thin solid #00FFFF;
}
p{
color:#009900;
}
img{
float:left;
}
＊.kaijo{
clear:left;
}
(03) clearプロパティで利用できる値は以下の通りです。なお、leftとrightの両方、あるいは片方の回り込みを解除する場合には、値に「both」を利用することができます。ほとんどの場合は「both」でよいでしょう。
| 値 | 意味 |
|---|---|
| left | leftの回り込みを解除 |
| right | rightの回り込みを解除 |
| none | 回り込みを解除しない |
| both | すべての回り込みを解除 |