实战haslayout（实战篇）！

<div id="nofloatbox"> 
        <div id="floatbox">
        </div> 
</div>

CSS代码如下： 

#nofloatbox { 
border: 1px solid #FF0000; 
background: #CCC; 
}   
#floatbox { 
float: left; 
width: 100px; 
height: 100px; 
border: 1px solid #0000FF; 
background: #00FF00; 
}

下面给这个无浮动的div加上个zoom:1;来触发其hasLayout属性试试，css代码如下：

#nofloatbox { 
border: 1px solid #FF0000; 
background: #CCC; 
zoom:1; 
}   
#floatbox { 
float: left; 
width: 100px; 
height: 100px; 
border: 1px solid #0000FF; 
background: #00FF00; 
}

前后效果图对比：

                                            

可见这次外围容器的高度被撑起来了。以上是针对只承认zoom属性的IE6、7来测试。
同样，设定上文所述的其他也会触发hasLayout的css属性，从而得到这个结果。通常firefox等标准的遵守浏览器可以加上overflow:hidden;来解决，而IE则不行。

二、当内联元素的hasLayout为true的时候，就可以给这个内联元素设定高度和宽度并得到期望的效果。

<p>
    今天的
   <span style="width: 100px; height: 50px; background: #DDD;">
            天气
   </span>
    真好
</p> 

效果如图，可见给行内元素增加宽高等于对牛弹琴！         

下面给span加上zoom: 1;来触发hasLayout：

<p>
    今天的
   <span style="width: 100px; height: 50px; background: #DDD; zoom: 1;">
            天气
   </span>
    真好
</p>

效果如图，

其实依据合理的语义化，恰当的文档流，正确的标准化所生产出来的页面，在各个公司出品的标准渲染的浏览器下，一般并不会存在太多兼容性的问题的。一般如果是因为layout而引起的显示不符期望效果的话，在ff下会表现正常，而在ie下会出现错误。这个时候可以尝试触发父容器及其中的子容器的haslayout属性，通常可以通过加上zoom:1;来调试。直到找到了产生问题的元素，再进行针对性的修正。最好的办法是对这个元素设置尺寸属性。但是，有时不便指定尺寸属性的情况下，就只能寻找替代方案了。对于ie7，最好的办法是设置最小高度属性为0；这个技术是无害的，因为0本来就是这个属性的初始值。而且没有必要对其他浏览器隐藏这个属性。而对于ie6和更早版本中触发一个元素hasLayout的方法是在overflow属性是visible的情况下设置这个元素的高度属性为1%，然后对其他浏览器隐藏这个设置。这种技术就是著名的Holly-hack。