CSS_html/css_WEB-ITnoseのdisplay/float/position属性値の相互影響

レイアウトとボックスの作成に関連する 3 つのプロパティ: 'display'、'position'、および 'float' があり、次のように相互作用します:

'display' の値が 'none' の場合、'position' ' と 'float' '効果はありません。この場合、ボックスは生成されません。
それ以外の場合、「position」値が「absolute」または「fixed」の場合、ボックスは絶対位置に設定され、「float」の計算値は「none」になり、「display」の値は次のように設定されます。ボックスの位置は、「top」、「right」、「bottom」、「left」プロパティとそのボックスを含むブロックによって決まります。
それ以外の場合、「float」の値が「none」でない場合、ボックスはフローティングとなり、「display」の値は以下のように設定されます。
それ以外の場合、要素がルート要素である場合、'display' の値は次のように設定されます (list-item で指定された値を除きます。値は 'block' または 'list-item' として計算されますが、これは未定義です) CSS2.1 では)

それ以外の場合、「display」属性の値は指定された値になります。

ここで、inline-flex は、CSS3 エラスティック レイアウト モジュールによって導入された新しい属性値です。

参考リンク:

1. https://www.w3.org/TR/css3-flexbox/#flex-containers

2. /visuren.html#dis-pos-flo

by iefreer