項 目 | 説 明 |
---|---|
記述形式 | セレクタ {float: 値 } |
値 の形式 | none,left,right | inherit |
初 期 値 | none |
対応ブラウザー | C1+ / e4+ / N4+ / Fx1+ / Op3.5+ / Ch1+ / Sa1+ |
適用可能な要素 | すべての要素 |
継 承 | しない |
floatプロパティ は,指定した当該要素を左寄せや右寄せにするとともに,後続要素をその反対側に回り込ませる ことを指定します。
指定できる値の形式は,以下のとおりです。
値 | 説 明 |
---|---|
none | フロートを指定しない。 (初期値) |
left | この要素を左寄せして,後続の要素を右に回り込ませる。 |
right | この要素を右寄せして,後続の要素を左に回り込ませる。 |
inherit | 親要素の指定を継承します。 |
なお,後続要素の回り込みの指定を解除するには,clearプロパティにより指定します。
また,floatプロパティ の指定対象となる要素は明確な幅をもつことが要求されます。 そのため,<p>要素 や <div>要素 で floatプロパティを指定する際には,同時に,widthプロパティで幅を指定する必要があります。
CSS3 おける策定作業は進んでおらず,このプロパティの規定は現状では CSS2.1 のものしかありません。
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> |
ブラウザー 表示例 | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
+ 画像:colosseo.jpg ↓
|