誤解されやすいoverflow:hidden

ページの堅牢性のためにoverflow:hiddenを使用することがよくあります.レイアウトが拡張されないようにするために、他のルールに合わせて文字の切断を実現するために、純粋にブロックレベルのコンテキストを作成するために使用される場合があります.しかし、多くの人がこの属性に対して一定の誤解を持っています.ネット上の多くの入門資料や文章では、overflow:hiddenに固定された幅(または高さ)を加えることで、内部の容器を超えた内容を強制的に隠すことができることについてのみ言及しています.overflow:hiddenを使用してブロックレベルのコンテキストを作成する方法を使用して、図文の混在を実現した場合、overflow:hiddenが特別な状況でトラブルを起こしたと認識されています.(詳しくはアダプティブな2つの欄の図文の混在の改善参照).しかし、css仕様をよく読むと、overflow:hiddenは必ずしもオーバーフロー内容を隠すとは限らないことがわかります.私が前に翻訳したclearfix改良及びoverflow:hidden詳細文の第2部には説明がありましたが、その文章の重点はフローティングの問題をクリアすることなので、overflowに関する問題はかえって注意を引かなかったのです.
overflow:hiddenはすべてのオーバーフローサブ要素を非表示にしません
overflow:hiddenの最大の誤解:高さと幅の少なくとも1つを有する容器にoverflow:hiddenが適用された場合、その内部のオーバーフローの内容はすべてクリップ(非表示)されます.しかし、事実は確かにそうですか?答えは「必ずしも」ではありません!事実はoverflow:hiddenスタイルを持つブロック要素の内部の要素オーバーフローは常に非表示ではありません.具体的には、次の条件を同時に満たす必要があります.
overflow:hiddenスタイルを持つブロック要素にはposition:relativeおよびposition:absoluteスタイルはありません.
内部オーバーフローの要素はposition:absoluteによって絶対的に位置決めされる.
結論だけに関心を持っているなら、この2点を覚えておけば十分です.私のところにはdemoがあります.構造は以下の通りです.

<div class="position"> <h2>position box</h2> <div class="overflow"> <h3>overflow box</h3> <div class="static"> <p>This is static child element. This is static child element. This is static child element. This is static child element.<p> <p>This is static child element. This is static child element. This is static child element. This is static child element.<p> </div> <div class="absolute">This is absolute child element. This is absolute child element. This is absolute child element. This is absolute child element.</div> </div> </div>

demoの子供靴を開けるのがおっくうな子供靴にいくつかの図を簡単に切りました.
 
 
demoでは、絶対的に位置決めされた要素がoverflow:hiddenの親要素の外に位置決めされているのが見えますが、依然として表示されています.一方、通常の要素は水平方向のオーバーフローが隠され、親要素が垂直方向に押し出されます.つまり、普通の要素の表現は私たちの予想に合っていますが、絶対的な位置決め要素は多くの人が当たり前のように隠されていません.
理論的根拠.
では、この原理はいったい何なのでしょうか.もちろんcss2.1仕様です.仕様overflowの説明についてでは、次のような言葉を見つけることができます.
This property specifies whether content of a block container element is clipped when it overflows the element’s box. It affects the clipping of all of the element’s content except any descendant elements (and their respective content and descendants) whose containing block is the viewport or an ancestor of the element.
このプロパティ(overflow)は、ブロック要素コンテナの内容が要素のボックスモデルの境界をオーバーフローしたときにクリップするかどうかを規定します.このプロパティは、適用された要素のすべてのコンテンツのクリップに影響します.ただし、子孫要素のブロックが、ブラウザのコンテンツの表示領域全体(body要素として理解できる)またはコンテナ(overflow要素が定義されている)の親要素である場合は、影響を受けません.
私が整理し直した言葉でも、少し回りくどい感じがします.しかし、この話では、重要な名詞「ブロックを含む」(containing block)が登場しました.ブロックを含むのは何ですか.これはよく知られていますが、ブロックは最近relativeまたはabsoluteの位置決め属性を持つ祖先要素であり、どのレベルの祖先要素も一致しなければ、ブロックはbody要素です.
これは、絶対的に位置決めされた要素がoverflow:hiddenによって隠されているかどうかを示し、overflow:hiddenに対するブロックを含む位置によって決定される.これは在日米軍のようなもので、彼らは日本の法律の制約を受けずにアメリカの軍法の制約を受けている.彼らの「ブロックを含む」のは、日本の裁判所ではなく米国軍だからだ.
実際にはcss2.1規範の11.1節で、さらに明確な説明があります.
A descendant box is  positioned absolutely , partly outside the box. Such boxes are not always clipped by the overflow property on their ancestors; specifically, they are not clipped by the overflow of any ancestor between themselves and their containing block.
翻訳:
絶対的に位置決めされた子孫ブロック要素で、一部はコンテナの外にあります.このような要素がクリップされるかどうかは、overflowプロパティを定義した祖先コンテナに必ずしも依存しない.特に、彼ら自身と彼らを含むブロックとの間に位置する祖先容器のoverflow属性によって剪断されない.
私のdemoに戻ると、overflowの要素は相対的に位置決めされた要素と絶対的に位置決めされた要素の間にあるので、規定に従って絶対的に位置決めされたサブ要素をクリップすることはできません.つまりおじいさんは相対的に位置を決めて、お父さんはあふれて隠すことを規定して、しかし息子は絶対的な位置を決める要素です.この時、息子が隠れているかどうかはおじいさんが決めて、お父さんではありません.
シーンの適用
この理論を理解して、私たちの仕事に対してどんな指導意義がありますか?
まず、overflow:hiddenは万能ではないことを知っています.そのすべてのサブ要素を徹底的に剪断するには、overflow:hiddenだけでなく、すべてのサブ要素のブロックとしても使用されます.もしある日overflow:hiddenの中の東が表示されていたら、あなたはなぜか知っています.
次に、もし私たちが先にoverflow:hiddenを定義して容器が開かれることを防止して、あるいはこの方法で神馬図文の混成をして、浮動を除去するなどの処理をして、甚だしきに至ってはoverflow:hiddenを使ってブロック級の文脈のこのような上流の東を実現して、突然製品はまた中の1つの浮層が表示すると言って、右側で、右上で、左の2つの欄の幅の外で...では、どうすればいいか知っています.
oocssでは,モジュールの定義にこの特性を十分に利用した.oocssのモジュールの基本構造は以下の通りです.

<div class="mod"> <div class="inner"> <div class="hd"></div> <div class="bd"></div> <div class="ft"></div> </div> </div>

彼らはinnerにposition:relativeを適用し、bdにoverflow:hiddenと_を適用した.zoom:1.興味のあるブーツは検討してもいいです.