2012-03-19 5 views
3

要素が浮動すると、さまざまな表示プロパティがレイアウトにどのように影響しますか?floatを適用したときのcss表示プロパティ

div.foo { 
    display: block; 
    float: left; 
} 

div.foo2 { 
    display: inline; 
    float: left; 
} 

div.foo3 { 
    display: inline-block; 
    float: left; 
} 

EDIT:

仕様に応じて何の違いは、存在しない場合は、ブラウザの特定の時代遅れのバージョン(エヘン、IEを行うか、これらのクラス間の違いは、もしあれば、どのようなもの)それらを異なってレンダリングするか?

答えて

8

私が正しくspecを読み、実際には(特殊性で、下記を参照してくださいが)要素にとにかくと力display: blockfloat: leftまたはrightオーバーライドdisplayプロパティを設定し、これを確認し、もしそうならそこに意志あなたの三つの例の間に差はなかっ:

要素が左側にフローティングされるブロック・ボックスを生成 を残しました。コンテンツはボックスの右側に流れ、上部(「クリア」プロパティの対象)から始まります。

ボックスが右に浮いている以外は、「左」、及びコンテンツを先頭から、ボックスの左側に流れると同様。

なし このボックスはフローティングではありません。

は異なりdisplay: block正常からしかし、floatを設定することがdisplayプロパティをオーバーライド幅に関しては、自身の行動を指示:なし幅が明示的に指定しなかった場合、それは必要とは反対に、浮いた要素は、同じくらいの幅を取り上げます自動的に100%幅を占める標準的なブロック要素の振る舞いに変換します。

+2

これは正しいです。フローティング要素は、他のCSSに関係なく、常にブロックボックスを生成します。 (絶対配置された要素についても同様です。) –

関連する問題