フロートのよく知られた特性、あまりよく知られていない位置とそれらの隣人であるディスプレイについて話しましょう。
ご存知のように、CSSには「ポジショニングスキーム」という概念があります。 これらの位置決めスキームには、通常のフロー、フロート、絶対位置決めの3つのタイプがあります。
伝えたいことを書く前に、いくつかの用語を紹介する必要があります。
ドキュメントは私たちのページです。
ドキュメントツリーは、ドキュメント内でhtmlを使用して記述した構造です。
ドキュメントツリーの各要素に対して、いわゆるボックスが生成されます。 私の意見では、これを
コンテナと呼びましょう。これはその意味を正確に反映しています。
また、各要素がコンテナを
含む複数の
子孫コンテナを生成することを考慮する必要があります（コンテナがブロック要素によって生成される場合）。
子孫コンテナは、コンテナを基準にして配置されますが、それに限定されず、オーバーフローを引き起こす可能性があります。
もちろん、すべてがもう少し複雑ですが、仕様のジャングルを掘り下げることはできません。 コンテナにはさまざまな種類があることに注意してくださいが、後で使用するためにコンテナの種類はそのままにします。
コンテナは、次のいずれかのポジショニングスキームに従って配置されます。
- 通常のフロー （通常のフロー、以降ストリーム ）には、ブロックの書式設定、インラインの書式設定、および相対的な配置が含まれます。
- フロート この場合、コンテナは最初はフローに従って配置され、その後、可能な限り右または左に移動します。
- 絶対位置決め 。 このアプローチでは、コンテナはストリームから完全に削除され（つまり、隣接するコンテナに影響を与えません）、収容コンテナに対して配置されます。
配置スキームは、floatプロパティとpositionプロパティを使用して選択されます。
表示プロパティの責任は何ですか？ 要素によって生成されるコンテナのタイプ（および場合によっては子孫コンテナ）を担当します。
これらの3つのプロパティ（postition、float、display）は次のように相互作用します。
- 表示がない場合、フロートと位置は無視する必要があります。 ただし、要素はコンテナを生成しません。
- 位置が絶対または固定（絶対の亜種）の場合、表示はブロックに設定され、フロートはなしに設定されます（したがって、指定された位置はフロートをキャンセルします）。 この場合のブロックの位置は、プロパティtop、right、bottom、left、およびコンテナを含むことによって記述されます。
- フロートがnoneでない場合、表示はブロックに設定され、コンテナーがポップアップします。
- それ以外の場合、表示プロパティは、定義された形式で適用されます。
今、最も重要なことは、プロパティの相互作用から生じるものであり、誰もが知っているべきですが、多くは忘れています：
コンテナの絶対位置の場合（位置は絶対または固定）、displayプロパティはブロックに設定され、フロートは誰もcssで書いたものに関係なくnoneです。float（floatはnoneと等しくない）のようなコンテナの場所の場合、cssでの書き込みに関係なく、displayプロパティはblockに設定されます。参照：
www.w3.org/TR/REC-CSS2/visuren.htmlwww.w3.org/TR/REC-CSS2/visudet.html追伸 また、この記事を書くように勧めてくれたWebmaskonフォーラムの友人にも感謝したいと思います。