这位妹纸，你在偷窥什么？你不知道螳螂捕蝉，黄雀在后吗？我是一只善良犀利的黄雀，不敢独自偷窥，愿与大家一同偷窥，当然，此次偷窥为了不然我们黄雀家族丢脸，我们必须偷窥出境界，偷窥出格调。

当我在偷窥这位 beautyGirl 的时候，我想到了一个严肃的问题：她父母是谁？

各位请把你们大跌的眼镜扶正，我不是要去见这位 beautyGirl 的家长，然后提亲，咳... 我在想的是，她父母的 height 如何，这将直接影响到我的下一步计划，为什么这么说呢，因为父母的 height 将会影响未来 beautyGirl 的 height。

一、父元素对 height 的影响

height 用 px 作为单位，大家最熟悉不了，px 为单位基本上就给元素板上钉钉了。那么，我们来探索一下 height:auto 和 height:100% 在不同情况下的不同表现。

让我们来看一个 height:100% 失效 demo：

demo 中明明设置了 beautyGirl 的高度为 100%，为什么不起作用呢？经过一番逻辑推理，深思熟虑，我明白了原来是未设置父元素的高度导致的。所以当我们堆砌页面的时候，有时候碰到 height:100% 不起作用了，很可能就是因为这个原因引起的。为了从根本上解决这个问题。我们给祖先元素加上 height:100%. 修改后 CSS 如下：

<style type="text/css">
            html,body{height:100%; margin:0;}
            .parent{height: 100%;}
            .beautyGirl{height: 100%; background: #fcf59b;}
</style>

再一看 demo:

哇，beautyGirl 高挑了身姿，挺拔了... 咳，经过这一分析，童鞋们应该明白我为什么要了解 beatyGirl 的父母了吧，基因的好坏能直接影响妹纸的成长啊。

下面我们来探讨偷窥角度的问题，因为偷窥的角度直接影响到了偷窥的质量，俗话说从门缝里看人会把人看扁，这回我们来个诡异的角度，怎么看？上，不是，下，太邪恶了吧。这回我们来个文艺的角度，脱离地心引力的诡异角度来看这位 beautyGirl 吧，漂浮吧，beautyGirl！

二、float 与绝对定位 (position:absolute) 对父元素 height 的影响

 修改 CSS 如下:

<style type="text/css">
            html,body{height:100%; margin:0;}
            .parent{background: #fcf59b;}
            .beautyGirl{float: left;}
</style>

运行 demo:

果然，那.parent 元素的黄色没有出现。这是为什么呢？

当元素 beautyGirl 浮动或者是绝对定位的时候，就造成了父元素的高度塌陷。然后，父元素的 height 就为 0 了，至于，为什么会发生这种事情，请移步后花园偷窥详情。移步后花园后，你可以 Ctrl+F 输入高度塌陷，来快速定位这一问题，如果没看过此作品，强烈建议您观赏。

不过浮动和绝对定位对 beautyGirl 的影响是不同的。如果说浮动是叛逆，那么绝对定位就是大逆不道啊。请看 demo：

float CSS:

<style type="text/css">
            html,body{height:100%; margin:0;}
            .parent{ width:400px; height:300px; border:1px solid #f00;}
            .beautyGirl{ float: left; width:100%; height: 100%; background: #fcf59b;}
</style>

效果图：

绝对定位 CSS:

<style type="text/css">
            html,body{height:100%; margin:0;}
            .parent{ width:400px; height:300px; border:1px solid #f00;}
            .beautyGirl{ position: absolute; width:100%; height: 100%; background: #fcf59b;}
</style>

效果图：

从图中可以看出，浮动的元素设置 height 和 width 为 100% 后，子元素填满了父元素的空间，而绝对定位元素却完全不受 parent 元素的控制，子元素将会以窗口大小为参照，来进行计算 height 和 width，当然有一种情况例外，那就是存在“干爹”元素的时候。子元素只受绝对或者相对定位的“干爹”元素控制。

可恶的干爹毒害了多少 beautyGirl 啊，又间接残害了多少良好男青年啊，下面我们来看一个罩杯问题，至于为什么是这个名字，请广大好青年自思。

三、line-height 对 height 的影响

这个问题相对简单，就一句话，IE6 下，当 line-height 大于 height 时，元素的实际高度等于 line-height。在很多情况下，这个因素就是高度超出，导致边框不对齐的原因。overflow:hidden 有时候能帮上忙。其他浏览器则由 height 来决定元素的高度。

既然决定对这个 beautyGirl 有一些想法，那么我们还需要了解一下 beautyGirl 的姊妹。嘿嘿，也许姐姐更合适也说不定哦。

四、min-height 和 max-height

说到这两个属性，就又要和 IE6 纠缠不清了。其它浏览器下，没什么好说的，不过也许，也不是你想的那样哦。下面提几个问题

最后献上 IE6 下 min-height 和 max-height 的模拟代码：

    .min-height{min-height:60px; _height:60px}
    .max-height{max-height:90px; _height: expression(this.offsetHeight> 90 ? 90 : true); overflow: hidden;}

 结束语

偷窥需勇气，码字不容易，abcd 敲对敲错又看运气，如果你觉得还可以，[推荐]or[顶] 随便你。