【CSS】floatの解除

Tweet

Category css 2012/03/28

問題

回り込み（float）を解除するとき、よくこうやるよね？

回り込み解除の要素がないと、後続の要素がこうなるよね？

解答例

回り込み解除のための要素を追加しなくても大丈夫。

<!-- bodyなどに相当する外側の枠 -->
<div style="width:500px;">

  <!-- floatする要素を含むボックス IEのためにwidthかzoomが必要になるでしょう -->
  <div style="background:#dddddd; overflow:hidden; width:100%;">

    <!-- float:left -->
    <div style="float:left; width:60%; background:#ffdddd;">
      style="float:left; width:60%;"
    </div>

    <!-- float:right -->
    <div style="float:right; width:30%; background:#ddffdd;">
      style="float:right; width:30%;"
    </div>

  </div>

  <!-- clearfixしない普通の要素 -->
  <div style="background:#ffffdd;">
    後続の要素。後続の要素。後続の要素。後続の要素。後続の要素。
  </div>

</div>

ある要素のoverflowをvisible以外にしておくと、要素の高さを、float:left/rightした要素やposition:relativeしている要素も含んだ高さに計算するのが仕様のようです。

10.6.6 Complicated cases

This section applies to:

• 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 per 10.6.7.

For ‘inline-block’ elements, the margin box is used when calculating the height of the line box.

10.6.7 ‘Auto’ heights for block formatting context roots

In certain cases (see, e.g., sections 10.6.4 and 10.6.6 above), the height of an element that establishes a block formatting context is computed as follows:
（上の10.6.6などに該当する場合の要素の高さは以下のように計算される）

If it only has inline-level children, the height is the distance between the top of the topmost line box and the bottom of the bottommost line box.

If it has block-level children, the height is the distance between the top margin-edge of the topmost block-level child box and the bottom margin-edge of the bottommost block-level child box.

Absolutely positioned children are ignored, and relatively positioned boxes are considered without their offset. Note that the child box may be an anonymous block box.

In addition, if the element has any floating descendants whose bottom margin edge is below the element’s bottom content edge, then the height is increased to include those edges. Only floats that participate in this block formatting context are taken into account, e.g., floats inside absolutely positioned descendants or other floats are not.

イメージしやすい例としては、ちょうどブラウザの表示領域が、中にfloatした要素をどれだけ含んでいるとしても、表示領域を広げて全部見せてくれるような感じ。

若干の（一部気にしなくてよさそうな）問題はある模様。
・overflow:hidden では Netscape7.1 で内容が表示されない（不具合）。
・overflow:auto では Mac版IE5 でスクロールバーが表示される。
・印刷の際に支障が出るブラウザがある。

補足

このoverflowをvisible以外にする方法は、floatしている要素の親要素の高さが広がるのに対して、回り込みの解除はclear:bothなどしている後続の要素の上にスペースを追加してfloatしている要素の下に配置してくれるものである。意味合いはちょっと違う。

参考

CSS2の仕様より overflow:visible以外の要素の高さの計算方法

Clearing floats