float:(left|right|none); 浮動体の配置
float:left; 左にimgを浮動、右にテキストを回りこみ表示
<img src="img/house1.jpg" alt="ペルージャの家" style="float:left;">「float:left」と指定されたイメージなどの浮動ブロックは、左側に表示され、それに続くテキストは、イメージの右側へ回り込んで表示されます。
<div>テキストに続く「clear」が指定されていないブロック要素は、回り込んだテキストに続けて回り込みを維持して表示されます。</div>
「float:left」と指定されたイメージなどの浮動ブロックは、左側に表示され、それに続くテキストは、イメージの右側へ回り込んで表示されます。
テキストに続く「clear」が指定されていないブロック要素は、回り込んだテキストに続けて回り込みを維持して表示されます。
float:right; 右にimgを浮動、左にテキストを回りこみ表示
<img src="img/house1.jpg" alt="ペルージャの家" style="float:right;">「float:right」と指定されたイメージなどの浮動ブロックは、右側に表示され、それに続くテキストは、イメージの左側へ回り込んで表示されます。
<div>テキストに続く「clear」が指定されていないブロック要素は、回り込んだテキストに続けて回り込みを維持して表示されます。</div>「float:right」と指定されたイメージなどの浮動ブロックは、右側に表示され、それに続くテキストは、イメージの左側へ回り込んで表示されます。
テキストに続く「clear」が指定されていないブロック要素は、回り込んだテキストに続けて回り込みを維持して表示されます。
float:none; imgを浮動させません
<img src="img/house1.jpg" alt="ペルージャの家" style="float:none;">「float:none」と指定されたイメージなどの浮動ブロックを浮動させません。
「float:none」と指定されたイメージなどの浮動ブロックを浮動させません。
clear:(none|left|right|both); 回り込みの解除
clear:none;
<img src="img/house1.jpg" alt="ペルージャの家" style="float:left;">「float:left」と指定されたイメージなどの浮動ブロックは、左側に表示され、それに続くテキストは、イメージの右側へ回り込んで表示されます。
<div style="clear:none;">テキストに続く「clear:none」が指定されたブロック要素は、回り込んだテキストに続けて回り込みを維持して表示されます。</div>
「float:left」と指定されたイメージなどの浮動ブロックは、左側に表示され、それに続くテキストは、イメージの右側へ回り込んで表示されます。
テキストに続く「clear:none」が指定されたブロック要素は、回り込んだテキストに続けて回り込みを維持して表示されます。
clear:left;
<img src="img/house1.jpg" alt="ペルージャの家" style="float:left;">「float:left」と指定されたイメージなどの浮動ブロックは、左側に表示され、それに続くテキストは、イメージの右側へ回り込んで表示されます。
<div style="clear:left;">テキストに続く「clear:left」が指定されたブロック要素は、回り込みが解除されイメージなどの浮動ブロックの下にテキストが表示されます。</div>「float:left」と指定されたイメージなどの浮動ブロックは、左側に表示され、それに続くテキストは、イメージの右側へ回り込んで表示されます。
テキストに続く「clear:left」が指定されたブロック要素は、回り込みが解除されイメージなどの浮動ブロックの下にテキストが表示されます。
clear:right;
<img src="img/house1.jpg" alt="ペルージャの家" style="float:right;">「float:right」と指定されたイメージなどの浮動ブロックは、右側に表示され、それに続くテキストは、イメージの左側へ回り込んで表示されます。
<div style="clear:right;">テキストに続く「clear:right」が指定されたブロック要素は、回り込みが解除されイメージなどの浮動ブロックの下にテキストが表示されます。</div>「float:right」と指定されたイメージなどの浮動ブロックは、右側に表示され、それに続くテキストは、イメージの左側へ回り込んで表示されます。
テキストに続く「clear:right」が指定されたブロック要素は、回り込みが解除されイメージなどの浮動ブロックの下にテキストが表示されます。
clear:both;
<img src="img/house1.jpg" alt="ペルージャの家" style="float:left;"><img src="img/house1.jpg" alt="ペルージャの家" style="float:right;">「float:left」「float:right」と指定されたイメージなどの浮動ブロックは、左右に表示され、それに続くテキストは、イメージの中央へ回り込んで表示されます。
<div style="clear:both;">テキストに続く「clear:both」が指定されたブロック要素は、回り込みが解除されイメージなどの浮動ブロックの下にテキストが表示されます。</div>「float:left」「float:right」と指定されたイメージなどの浮動ブロックは、左右に表示され、それに続くテキストは、イメージの中央へ回り込んで表示されます。
テキストに続く「clear:both」が指定されたブロック要素は、回り込みが解除されイメージなどの浮動ブロックの下にテキストが表示されます。
br要素の回り込み解除
<img src="img/house1.jpg" alt="ペルージャの家" style="float:left;">HTML4.01の仕様においては、clear属性はインライン要素であるbr要素のみが有する属性ですが、CSS2の仕様においては、clearプロパティはブロック要素のみに適用されるプロパティであることに注意しなければなりません。<br style="clear:left;">
しかしながら実際には、、-ie8 ff3 o9 sf4 gc2においても、インライン要素であるbr要素にclearプロパティを指定し、回り込みを解除することができます。
HTML4.01の仕様においては、clear属性はインライン要素であるbr要素のみが有する属性ですが、CSS2の仕様においては、clearプロパティはブロック要素のみに適用されるプロパティであることに注意しなければなりません。しかしながら実際には、ie8 ff3 o9 sf4 gc2各ブラウザにおいても、インライン要素であるbr要素にclearプロパティを指定し、回り込みを解除することができます。
