CSS2: float プロパティ - 幅をもつ要素の配置とテキストの回り込み

■ 概要

項  目説  明
記述形式 セレクタ {float: }
値 の形式 noneleftright | inherit
初 期 値 none
対応ブラウザー C1+ / e4+ / N4+ / Fx1+ / Op3.5+ / Ch1+ / Sa1+
適用可能な要素 すべての要素
継  承 しない

■ 解説

floatプロパティ は,指定した当該要素を左寄せや右寄せにするとともに,後続要素をその反対側に回り込ませる ことを指定します。

指定できる値の形式は,以下のとおりです。

説  明
none フロートを指定しない。 (初期値)
left この要素を左寄せして,後続の要素を右に回り込ませる。
right この要素を右寄せして,後続の要素を左に回り込ませる。
inherit 親要素の指定を継承します。

なお,後続要素の回り込みの指定を解除するには,clearプロパティにより指定します。

また,floatプロパティ の指定対象となる要素は明確な幅をもつことが要求されます。 そのため,<p>要素<div>要素 で floatプロパティを指定する際には,同時に,widthプロパティで幅を指定する必要があります。

CSS3 おける策定作業は進んでおらず,このプロパティの規定は現状では CSS2.1 のものしかありません。

■ 使用例( float プロパティの利用)

HTMLソース
HTML
<body> ~ </body>
<table border="1" style="margin-left: 2em; float:left;">
  <tr><th>■■</th><th>●●</th></tr>
  <tr><td>□□</td><td>◎◎</td></tr>
  <tr><td>◇◇</td><td>○○</td></tr>
</table>
<div style="width: 2em; margin-left: 2em; float:left;"><br><br>+</div>
<div style="width:15em; text-align:center; float:left;">
  <img src="../how2/colosseo.jpg"><br>画像:colosseo.jpg
</div>
<br style="clear:left;">
<div style="width:2em; margin-left: 10em;">↓</div>
<br>
<table border="1" margin-left: 7.5em;
       style="background-image:url(../how2/colosseo.jpg); ">
  <tr><th>■■</th><th>●●</th></tr>
  <tr><td>□□</td><td>◎◎</td></tr>
  <tr><td>◇◇</td><td>○○</td></tr>
</table>

ブラウザー 表示例
■■●●
□□◎◎
◇◇○○


sample
画像:colosseo.jpg


■■●●
□□◎◎
◇◇○○

■ 備考

【参考ページ】