時々CSSでfloatとdisplay:inlineを同時に指定するコードを見ることがあります。
なぜ、floatして横並びにしているものをわざわざdisplay:inlineにして幅とか高さとか設定できなくなるのでは？と考えてしまいます。
これは、今となってはもう古い書き方でIE対策を施しているものです。
CSSの視覚整形モデルではfloat leftの定義を以下のようにしています。
左に浮動するブロックボックスを生成する。 続く内容は、（’clear’プロパティの指定に従いつつ）そのボックスの右側に上から流し込まれる。 このプロパティが’none’以外の値を取る場合、その要素の’display’プロパティは無視される。
つまり、標準仕様のブラウザでは要素をfloatさせるとその要素のdisplayプロパティは一部無視されることになります。
ところが、バグだらけのIE６のfloatを使用するとその方向のmarginの値が倍になるバグを解決するために、display:inlineを使うものです。
今となっては、なぜIEでそのような挙動をするのかということよりも、標準仕様のブラウザではfloatさせるとその要素のdisplayプロパティは一部無視されることが興味深い内容だし知っておきたいことになります。
さて、その一部とは以下の要素でこれはblockと書き換えられます。
inline, run-in, compact, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption
そのため、例えばli要素をdisplay:blockと指定することで、list-itemの値をblockに変更することは可能です。
