浮動体の配置
(Positioning the float)
ビジュアル
ホーム
>
CSS2 Note
> 浮動体の配置
C1- ie4- N4-
説明
float:
float
;
C1- ie4- N4-
値:
----- hint -----
a b この順序で
a|b どれか1つ
a||b 少なくとも1つ
[...] グループ
a* 0回以上
a+ 1回以上
a? 0回、1回
{a,b} a回以上b回以下
left | right | none |
inherit
初期値:
none
、
適用要素:
すべて(ただし、
position
プロパティの値として「absolute」「fixed」が指定されている要素と、内容の追加
content
、
quotes
プロパティを除く)
、
継承:
しない
、
%値:
なし
、
メディア:
ビジュアル
浮動体とは、その側面に文章などの内容が回り込める
ボックス
のことを指し、floatプロパティは、指定された浮動ボックスを左か右に浮動させるか、あるいは全く浮動させないかを指定します。浮動体には幅が明確に指定されていなくてはなりません。内在寸法のない
置換要素
以外の要素に関しては、
width
プロパティで幅を明確にしておく必要があります。
使用例
img.icon {float:left; margin:1em}
float プロパティの値
left
C1- ie4- N4- 指定した要素を左に浮動させ、続く内容を右側に回り込ませます。
right
C1- ie4- N4- 指定した要素を右に浮動させ、続く内容を左側に回りこませます。
none
C1- ie4- N4- 浮動させません。初期値。
回り込みのレンダリング
float:(left|right|none); 浮動体の配置
clear:(none|left|right|both); 回り込みの解除
br要素の回り込み解除
ビジュアルによるカラム(フレームレイアウト)
floatプロパティによるカラム
floatプロパティによる3カラム
floatプロパティによる左カラム
floatプロパティによる右カラム
CSS2仕様書にあるposition:fixed;によるフレームレイアウト
回り込みにおけるバグ
IE6までにおいては、画像などにテキストを回り込ませると、場合によってテキストが消えてしまうというバグが存在します。HTMLのimg要素のalign属性を指定した場合などおよび、スタイルシート(CSS)のfloatプロパティを指定した場合も、同様に発生するので注意が必要です。
反転表示をしたり、ウィンドウの大きさを変えたりすると、文字が出たり消えたりするようです。
HTMLのalign属性による回り込みは、
img
、
object
、
applet
、
input type="image"
、
table
、
iframe
、独自要素においては、
embed
、
spacer type="block"
において行われます。
関連項目:
display
|
position
|
top right bottom left
| float |
clear
|
z-index
|
direction
|
unicode-bidi
2005/09/22発行 2008/10/01更新