【分享】零高度的浮动元素是否不影响其他元素定位？

在浏览器的兼容性问题里，有的对页面影响不大，比如，A 字体的颜色啊，等等。但是，有些影响就比较大了，比如布局的差异。在IE中好好的，到了Firefox/Chrome和Safari中却一塌糊涂。其中，布局问题中比较难调试的，就数浮动引起的问题了。

另外，从对盒子模型(box model)的了解中我们知道，每个元素都会形成几个框，框的大小尺寸等会对页面的布局产生决定性的影响。元素的框，由高和宽围成了一个拥有面积的区域，我们也应该知道，如果没有面积，就称不上是区域，只能叫做线。有没有想过这种情况，一个元素的高是0，宽不是0，那么，它的面积是0，在页面中，可以算作是不存在的元素，因为它不占据空间，不应该影响其他框的布局。实际情况是这样吗？

我们知道，浮动框会缩短当前行框的宽度，会影响后续浮动元素的定位。我们就从这两点出发，去探求一下这个问题。

0高度的浮动元素会缩短行框吗？
看这个例子：
HTML code

<div style="width:400px;  overflow:hidden; border:1px solid red; font-size:30px;">
    <div id="float" style="float:left; width:100px; background:green;">
       <div></div>
    </div>
    TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
</div>

其中，他们的包含块是一个400px的DIV元素，其中包含一个左浮动元素float和一些文字。浮动元素没有设置高度，宽度为100px，并且它只有一个空DIV元素，因此float的高度将为0。加入空 DIV 元素的目的是为了避免 IE6 和 IE7 中的另一个由hasLayout产生的Bug（空的DIV的高度在IE中不是0）的影响，以确保 float 的高度在IE6和IE7中为0。
在各个浏览器中测试一遍，截图：

可见，在IE6/IE7/IE8(Q)中，行框被缩短，行内框的定位被影响。而其他浏览器中，则认为它不存在。通过 IE 的 debug 工具查看后发现，浮动元素的高度确实是0。

0高度的浮动元素会否影响其他浮动元素呢？
将例子修改一下，把文本换成一个浮动元素。
例子代码：
HTML code

<div style="width:400px;  overflow:hidden; border:1px solid red;">
    <div id="float" style="float:left; width:100px; background:green;">
       <div></div>
    </div>
    <div id="float2" style="float:left; width:100px; height:100px; background:blue;"></div>
</div>

这时的情况与前面类似，看截图便知：

可见，IE6/IE7/IE8(Q)中的高度为0的浮动元素确实还占据空间。

呃，，很奇怪对不对，难道是hasLayout在作怪吗？到底怎么回事呢？不得而知。
望哪位大侠指教！！

更多兼容性问题：
【分享】浏览器兼容性问题目录

又研究出高深的东西来了啊。

找出来让人摸不着头脑的东西了- -！知道内情的，大概只有IE的开发人员吧！！

这个确实没注意过，不过一般情况前没有人去加一个空的div吧。所以出现这种问题的也好像很少

什么什么

这个问题没有研究过。