目次 < プロパティ一覧 戻る 使用例

バナー

中年おっちゃんでも出来た ウェブページ作成講座 with ? mark

floatプロパティ

floatプロパティは、該当要素を表示可能左端か右端に表示します。

floatプロパティが、全てのブラウザで完全に反映できるのであれば、レイアウトを行なうのに欠かせないプロパティなのですが、実際には、挙動不審なブラウザが存在します。(特に、IE8以前のIE

第四章 私のホームページ - 其の壱 - サンプル-3 以降を参照して下さい。


(value)
left該当要素範囲の表示を表示可能な左端に配置します。
right該当要素範囲の表示を表示可能な右端に配置します。
none回り込みの指定無し
inherit親要素からの継承
適用要素BODY要素の内容の全ての要素ですが、positionプロパティでabsolute/fixed指定された要素を除きます。
初期値none
継承しません

clearプロパティ

clearプロパティは、floatプロパティの指定を解除します。

none解除無し。
leftfloat : left ; を解除します。
rightfloat : right ; を解除します。
bothfloat : left ; , float : right ; 両方を解除します。
inherit親要素からの継承
適用要素ブロック要素
初期値none
継承しません

使用例

はスタイルシート記述です。

はHTML記述です。

XXXX 背景色と内枠線は修飾対象要素の範囲です。

XXXX 背景色と外枠線は親要素です。

挙動不審なブラウザ ?

スタイルシート記述
.fr{float:right;}
HTML記述
<p>鳥啼く声す <span class="fr">夢覚ませ</span> 見よ明け渡る東を</p>
表示例

鳥啼く声す 夢覚ませ 見よ明け渡る東を

で検証してみます。

IE8での表示
IE8での表示

IE7での表示
IE7での表示

IE6での表示
IE6での表示

IE8では、正常に表示されていますが、IE7では、表示位置が枠外、IE6に至っては表示すらされていません!

上記は、ほんの一例です。インライン要素で検証しましたが、ブロック要素でも、色々制限やバグが有ります。

IEは、使用されているシェアが圧倒的に多く、IE6/7を使用されている方も大勢おられます。事実、私の会社のパソコンもIE6を使用していますので、レイアウトが崩れるサイトもあります。

だから、私はレイアウト目的でTABLE要素を使用しています。

IEさん、目を覚ませ〜!

目次 < プロパティ一覧 戻る Top

Created:Jun 01, 2005 Updated:Oct.,25,2011 © by おっちゃん
Oct.,25,2011 全面更新