CSS における display, position, float プロパティの相互関係 - elm200 の日記(旧はてなダイアリー)

趣旨 要素を描画する位置や大きさに関係する重要な 3 つのプロパティがある。display, position, float である。この3者は複雑に絡みあっていて、いつも頭が爆発しそうになる。今日は、これを整理することから始めたい。 注意事項 まず注意。 私は W3C CSS 2.1 を勉強中の身で、すべての項目にわたってきちんと理解しているとはとてもいえない。したがって、誤りも多く含まれると思うので、その点を留意してほしい。逆に間違っている場所を教えていただけると助かります。ただ、CSS 2.1 はあまりに複雑で、そのままでは頭に入らないので、「なぜこのルールは存在するのか？」ということを常に考えながら勉強していこうと思っている。これからの文章で「このルールってこういう趣旨だよな〜」とかブツブツ言っているかもしれないが、読みたい人は読めばよし、読みたくなければスルーしてほしい。 用語定

[Hash]

いつもこんがらがる

[taninsw]

absolute/fixedが指定できるのはblockのみ & block (static/relative) の時のみfloating可能、と考えると自然

[site159]

うざったいんだよねぇ、細かいところで

[kurobuchi]

ややこしいけど，理解すればレイアウトで困る事が少なくなりそう．

[masakanou]

読む

[kits]

CSS21:9.7のアルゴリズムは知らなかった。 http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo