作者：孙东国

标准参考

根据 CSS2.1 规范中的描述，浮动元素将尽可能的向左或向右浮动，直到该元素的外边界碰到其包含块的边界或另一个浮动元素的外边界。

换句话说，在同一包含块内的多个浮动元素是不会互相覆盖的，并且前边的浮动元素可能会“阻挡”其后的浮动元素。除非前边的浮动元素是不可见的。

关于浮动元素的详细资料，请参考 CSS2.1 规范 9.5 中的内容。

关于包含块的详细资料，请参考 CSS2.1 规范 10.1 中的内容。

问题描述

在 IE6 IE7 IE8(Q) 中，一个零高度的浮动元素仍能阻挡与其向相同方向浮动的兄弟元素。

造成的影响

这个问题将导致一些浮动元素在各浏览器中的位置不一致，在有些浏览器中可能发生布局混乱的现象。

受影响的浏览器

IE6 IE7 IE8(Q)

问题分析

分析以下代码：

<div id="Container" style="width:260px; height:30px;
                background:lightgrey;"> <div id="Zero_Height"
                style="float:left; width:100px; background:black;"><div></div></div> <div id="Floating"
                style="float:left; width:100px; height:30px; background:darkgray;"></div>
                </div>

• Container 是一个 260px * 30px 的 DIV 元素，其中包含两个左浮动元素 Zero_Height 和 Floating。
• Zero_Height 的宽度为 100px，没有设置高度，背景色为黑色，并且它只有一个空 DIV 元素，因此 Zero_Height 的高度将为 0，这点通过在下边的截图中看不到黑色可以得证。（加入空 DIV 元素的目的是为了避免 IE6 E7 中的另一个由 hasLayout 产生的 Bug 的影响，以确保 Zero_Height 的高度在 IE6 IE7 中为 0。）
• Floating 的尺寸是 100px * 30px。

根据 CSS2.1 规范中的描述可知，当一个浮动元素的高度为零（即不可见）时，该元素将不能阻挡其他的浮动元素，因为它的外边界也是不可见的。

这段代码在不同的浏览器环境中表现如下：

将 Zero_Height 和 Floating 的 'float' 特性值由 'left' 修改为 'right' 后：

可见，在 IE6 IE7 IE8(Q) 中，Zero_Height 总是能阻挡与其向相同方向浮动的 Floating，这与规范中的描述不符。
在 IE8(S) Firefox Safari Chrome Opera 中，则按照规范进行了正确的处理：Floating 没有被 Zero_Height 阻挡。

这个差异是由 IE6 IE7 IE8(Q) 中处理浮动元素之间的关系的 Bug 造成的，它在 IE8(S) 中被修复。

如果一个页面在 IE6 IE7 IE8(Q) 中被设计，并且触发了该 Bug，那么这个页面在其他浏览器中的布局将与预期的不符。

解决方案

如果希望一个浮动元素能阻挡与其向相同方向浮动的兄弟元素，请确保其高度不为零；否则，请隐藏该元素，以使页面布局在各浏览器中的表现一致。

参见

知识库

• ...

相关问题

• RD8004: IE6 IE7 IE8(Q) 中浮动元素宽度的 shrink-to-fit 算法与标准规定的算法不同
• RD8006: IE6 IE7 IE8(Q) 中右浮动元素会撑大其祖先级元素的宽度