这篇文章是 Holly Bergevin 和我最初为CommunityMX 网站 写的，该网站资源丰富，论坛里高手云集，不过需要订阅。

如果用表格布局，Internet Explorer 的表现和别的浏览器并无二致。但是如果用 CSS 来定位时， IE 表现得相当怪异。其中之一就是他对浮动的处理方式。

IE 到底如何与众不同？

要理解浮动模型，首先要弄清当浮动元素后面紧跟有非浮动元素时的行为。如浮动理论所说，紧跟在浮动元素之后的区块元素会无视该浮动元素的存在，显示在与浮动元素完全相同的位置上。浮动元素蒙在区块元素之上，该区块元素（假设没有指定其宽度）将横跨整个浏览器的视区或所在的容器宽度。

为了使元素显示在浮动元素的旁边，浮动元素必须在这些元素的前面。如果浮动元素紧跟在非浮动元素之后，它将出现在这些非浮动元素的正下方。

当这种情况出现时（浮动元素后面紧跟区块元素），W3C的标准中说，区块元素必须显示在容器的顶部。现代浏览器对此都能正确执行。如图所示：

浅棕色的 div 紧跟在顶部，前面的绿色浮动块蒙在它的上面。按照标准，以深蓝色条纹表示的的行不允许出现在浮动块的背后。

<div style="float:left; width:30%;">
浮动区块内容。
</div>

<p>段落</p>

请留意，之后的区块元素会伸展到整个容器的宽度，浮动元素只是覆盖在其上面。 W3C 标准规定，每行（包括文本和图片）必须显示在段落内未被浮动元素遮住的区域。同样，现代浏览器也符合这个标准。

一切都很正常，但是如果为区块元素指定了 width (或 height)，情况就大不一样了。一旦指定了尺寸，IE 处理浮动元素的方式就发生了巨大的变化。

错在哪里

我们不妨为区块元素指定 {width: 100%;} 。 在大多数的现代浏览器中，结果不会有什么变化，因为 "100%" 指的是整个容器的宽度。不幸的是 IE 可不这么想。

在 IE 中， {width: 100%;} 被重新解释为 浮动元素侧面所剩余的宽度，而不是标准中所说的整个容器的宽度。此外， 如果左边有浮动元素，则区块元素从它的右面 开始显示，如果右面有浮动元素，则区块元素从它的左边开始显示。而标准规定，无论是否存在浮动元素， dvi 都应该从视区的最左边开始显示。

总之，任何紧跟在浮动元素后面的区块元素，如果指定了它的高度或宽度， 在 IE 中观看时就会成这样。下图就是 IE 的显示，请与上图标准所要求的效果对照。

<div style="float:left; width:30%;">
浮动区块内容。</div>

<p>段落</p>
 
<p style="width:100%;">Paragraph</p>

还记得，浮动元素背后的文本行应该被移出来。如果浮动元素比区块元素高，很难看出 IE 中没有把浮动元素盖在区块元素之上。如果区块元素没有边框和背景色，更难以察觉到这个变化。

如果浮动元素不是图片，则在 IE 下，两个元素之间会有 3 个像素的间隙，不过这个 IE 独有的问题将另文讨论。

IE 本身也不一致

如果说有浮动元素存在时，IE 对已指定尺寸的段落的宽度计算有误的话，更为难以想象的是 只要没有浮动元素，它却将同一页面内的另一个段落的宽度计算成整个容器的宽度。

图中显示的是IE 中一个浮动元素之后紧接两个 {width:100%;} 的段落，唯一的区别就是第一个段落在浮动元素的旁边，而第二个却不。所以即使不考虑它的错误，我们也无法指望 IE 的行为前后一致。

确实令人心烦。如果宽度不是100%，或者用其他单位来指定区块的宽度，情况更为糟糕。

现实的问题

OK，假如一个新手想用浮动来实现两个分栏的布局，他想要的就是两个简单、分离的栏目直到页低，这不算过分吧。在 Netscape 4 下的一个可行方案是为左边的栏目指定 {float:left;} 的样式，后面的区块从浮动块的右边直落下去。

假定浮动块的样式为 {width:50%;} ，为了将两个分栏垂直对齐，并将边框和背景区分开来，他将非浮动的分栏的左边距(left margin)设置为 "60%"，右边距大概为 "5%"。浮动分栏也有一个左边距，离开左边一些。该代码的确可以创建两个简洁的肩并肩的分栏（见图）。

<div style="float:left; width:50%; margin-left:5%;">
Content in float.
</div>

<p style="margin-left:60%; margin-right:5%;">
Paragraph
</p>

在 IE 下没有问题。但通常情况下，新手会为区块元素指定一个宽度。不幸的是，只有将后面的段落的width 设定为 70%左右，才能在 IE 中看起来舒服一些。浮动分栏不但需要左边距，而且还要有右边距（或者为右边分栏指定一个左边距），将右边的分栏推开一些。

现在这个新手终于高兴地得到了两个分栏。怎么不会呢？这种效果很容易实现，他所见到的就是他想要的。 不过他高兴得太早了。

如果在一个真正遵守标准的浏览器（不是IE）观看这个布局，区块元素（根据标准）会从视区的左边开始，并且宽度只有 70%，在右边留下了 30% 的空白。真是糟糕，如果区块元素仅比浮动元素宽一点，浮动区块旁边蓝色条纹所表示的文本就会被挤得更短。而浮动区块的左边距又使得文本变得更短。如此一来，这些极短的行就使行数增加，从而增加了区块元素的高度，文字就会显示在浮动元素的下方，填满这个总宽度为70%的分栏，完全破坏了在非IE浏览器下的外观。令人怀疑这就是微软的用意？

如果浮动元素和区块元素的宽度相同或者更宽，则文字根本不会显示在旁边，而是全部被推倒了浮动元素的下方。这根本不是所希望的结果。

IE6 的新变化

现在我们已经知道，IE 6甚至连这个糟糕的浮动模型也不再遵守了。所以我们以上所说的目前只针对IE 5.x/win 而不是 IE 6。IE6 和 IE5.x 一样，仍然错误地计算浮动区块旁边的段落起始位置，可是它正确地将 {width: 100%;} 看成是外部容器的整个宽度，这一点和其他遵守标准的浏览器一致。

让我们来设想一下。一个段落的宽度是100%，但是从一个浮动元素的后面开始。 100% 加上浮动元素的宽度会略大于容器的宽度！如果容器是 body 元素，就会出现水平滚动条。

可以肯定的是，如果有人没有在 IE 浏览器下设计种浮动布局（指定区块元素的宽度），而在 IE 下观看时这种布局很容易错乱，在我看来这并不奇怪。如果倒过来，情况反而会更糟。

运用浮动的一些建议

对紧跟在浮动元素后面的元素不要制定宽度或高度。当然这意味着如果想实现独立的分栏，必须为区块元素指定一个左边距。很不幸者这又带来了 IE 下另一个缺憾。还记得我以前提到过的IE中 "3个像素" 的 bug吗？就是它。

结论

人们很容易注意到区块模型问题，而且最后得以修正。但是这个问题也同样严重。没有迹象表明微软会关注它，甚至根本不愿承认这个问题。 何苦呢？实际上根本没有人知道这个问题！

采用 CSS 定位非常有利于减少下载时间、简化网站设计更新和改进站点的亲和力，但是作为最广泛使用的浏览器， Internet Explorer 使之变得非常困难。但愿这种违背标准的行为总有个尽头。

Holly 'n John   e-mail ©positioniseverything
最后更新：January 18, 2004
写于 July 21, 2003
中文翻译：onestab Jan 30, 2004