containing block's height

 

containing block's height

hanlray@gmail.com
Revision: 1.0 Date: 2006/05/14

CSS2中height属性用来指定一个block box的content的高度（记起了box model了吗），其缺省值为auto，表示该高度由其内容决定，即随着其所包含的boxes的不同而变化。当该containing block所包含的boxes都是static positioned（在normal flow中的box）时，该height值应该大致等于被包含的block boxes的整体高度（margin+border+padding+content）之和；当该containing block包含有floated boxes的时候，情况又是怎么样呢？看一个例子：

  <div style="background-color:#FFE4B5;">
      <h1 style="float:left;">Welcome to site</h1>
      <div style="float:right">
  	<a href="">site in English</a>

  	hello,please <a href="">login</a> or <a href="">register</a>
      </div>
  </div>

结果是div的背景颜色没有显示，用Firebug查看containing div的属性，发现其height为0，padding也为0，当然无法显示了。这是因为在containing block上的相关计算（如这里的height的计算）只针对其normal flow中boxes（即static positioned boxes），这里的两个block boxes由于被float positioning而被拿出normal flow，因此虽然其高度不为0，但却对containing block的height计算毫无作用。即使这个containg div包含一个normal flow中的block box，当该box的高度小于其他floated boxes的高度时，结果仍然是不对的，因为这时div的高度是该box的高度（整个高度），并没有包围其所有boxes。

这时可以为height显式地指定一个数值，只要使其能够包围其所有的box即可，但这显然不是一个好方法；在containing block的最后加一个cleared block是一个比较好的方法：

  <div style="background-color:#FFE4B5;">
      <h1 style="float:left;">Welcome to site</h1>
      <div style="float:right">

  	<a href="">site in English</a>
  	hello,please <a href="">login</a> or <a href="">register</a>
      </div>

      <div style="clear:both"/>
  </div>

此时的结果就是正确的，这是因为一个被clear:both的block box总是从一个新行开始，其top margin扩展到上一个处于normal flow中的block box，如图。显然这样计算出的高度一定能包围其所有的boxes。