浮動体の配置 (Positioning the float)

 
ビジュアル
ホーム > CSS2 Note > 浮動体の配置
C1- ie4- N4-

説明

float: float; C1- ie4- N4-
値:  left | right | none | inherit
初期値:none適用要素:すべて(ただし、positionプロパティの値として「absolute」「fixed」が指定されている要素と、内容の追加 contentquotesプロパティを除く)継承:しない%値:なしメディア:ビジュアル
浮動体とは、その側面に文章などの内容が回り込めるボックスのことを指し、floatプロパティは、指定された浮動ボックスを左か右に浮動させるか、あるいは全く浮動させないかを指定します。浮動体には幅が明確に指定されていなくてはなりません。内在寸法のない置換要素以外の要素に関しては、widthプロパティで幅を明確にしておく必要があります。
 

使用例

img.icon {float:left; margin:1em}
 

float プロパティの値

leftC1- ie4- N4- 指定した要素を左に浮動させ、続く内容を右側に回り込ませます。
rightC1- ie4- N4- 指定した要素を右に浮動させ、続く内容を左側に回りこませます。
noneC1- ie4- N4- 浮動させません。初期値。
 
 
 

回り込みにおけるバグ



IE6までにおいては、画像などにテキストを回り込ませると、場合によってテキストが消えてしまうというバグが存在します。HTMLのimg要素のalign属性を指定した場合などおよび、スタイルシート(CSS)のfloatプロパティを指定した場合も、同様に発生するので注意が必要です。
反転表示をしたり、ウィンドウの大きさを変えたりすると、文字が出たり消えたりするようです。

HTMLのalign属性による回り込みは、imgobjectappletinput type="image"tableiframe、独自要素においては、embedspacer type="block"において行われます。
 
トップページ CSS2 Note ページトップ
 2005/09/22発行 2008/10/01更新