Takazudo Clipping*

overflow:hiddenって、飛び出たのクリップされるんでないの？

しかし、普通に考えると、これでなぜfloatがクリアできるかは甚だ疑問です。
floatされたボックスの高さは、通常のフローとは別で、親ブロックを飛び出て表示されるはずです。さらにoveflow:hiddenにしたら、その飛び出た分はクリップされてぶちぎられるのが普通じゃないですか？それでうんうん唸る人も多いはずだし。こんなのです。

• overflow:visible（何も指定なし）でfloat突き出るサンプル

親ボックスをとびでてしまうでしょ。最初のサンプルも飛び出るのが普通でしょ。でも実はそうではないんだなー

overflow:visibleとoverflow:hiddenの時の高さの計算方法は違う

何も指定しないか、height:autoとした要素の高さは、その高さは自動的に決まるでしょう？テキスト一杯入れたらpの高さはでかくなりますよね？ならなかったら困る。しかし、世の中にはposition:absolute/relativeが指定されたり、inline要素があったり、inline-block要素があったりと、同じheight:autoでも、実は、そいつらによって計算方法は全く違うのです。CSS2.1では、「通常のblock要素」と、「複雑なケース（overflow:hiddenが指定されたblock要素を含む）」について、高さの計算方法は別に定義されています。CSS2.1の仕様書より、高さの計算方法について、適当に略しながら抜粋。

10.6.3 Block-level non-replaced elements in normal flow when 'overflow' computes to 'visible'

Only children in the normal flow are taken into account (i.e., floating boxes and absolutely positioned boxes are ignored, and relatively positioned boxes are considered without their offset). Note that the child box may be an anonymous block box.

10.6.6 Complicated cases

• Block-level, non-replaced elements in normal flow when 'overflow' does not compute to 'visible' (except if the 'overflow' property's value has been propagated to the viewport).
• 'Inline-block', non-replaced elements.
• Floating, non-replaced elements.

If 'margin-top', or 'margin-bottom' are 'auto', their used value is 0. If 'height' is 'auto', the height depends on the element's descendants.

CSS2.1 Working Draft - 10.6 Calculating heights and margins

最初のものは、「overflow:visibleが指定されたblock要素」について。ここでは、高さについて、「floatボックスとposition:absoluteな要素は無視される」と述べています。

そして、２番目のものは、「複雑なケース」について。この複雑なケースというのは何かというと、「overflow:visible以外が指定されたblock要素」、「inline-block要素」、「floatされた要素」のことです。ここで、「heightがautoであれば、その高さは子孫の要素の高さによって決まる」と言っています。普通のblock要素の時みたいに、「中にfloatされた要素があってもその高さを無視する」とは書いていません。つまり、そいつの高さ分は確実に確保されるってことになります。

これが有効だと直感的に理解するには、たとえば、overflow:hiddenではなくて、overflow:scrollを指定してみると、なんとなく分かった感じになります。

• overflow:scrollでfloatをclearしたサンプル

どうです？ scrollの場合も、height:autoの場合、高さが拡張されるでしょう？floatされたものが中にあっても、その高さ分は確保されるということです。まだ分からんという人は、ブラウザの右側に現れるスクロールバーを見てください。これは、html要素の中身がoverflowしている時に表示されているのですよ。floatされた要素があっても、ページの下のほうまでスクロールしてくれなきゃ困るでしょう？たぶんこれと同じようなことです。（htmlとbodyに関してはもっと複雑な何かがありそうだが）

これは、clear:bothで指定した時とは、微妙に解釈が異なります。clear:bothの場合は、クリアランスという概念が適用されます。これは、「要素をフローティング要素の後ろへ押し出すために、要素の上マージンに余分なスペースを追加する」というものです。brにclear:both指定して置く場合には、そういうことが起こっている。overflow:hidden/scrollの場合は、要素の高さ分の高さを親ボックスが確保するというわけで、ちょっと違う。正確にはclearされたわけではない。ハズ。実現される効果は同じだけど。

まぁ、Win/MacIE5あたりではならんかもしれんけどね