The FloatModel Problem

什么是 Float model ?

下面是一个关于静态 (static) 元素与浮动元素 (floats) 交互的简单例子。根据W3C的规范，当一个浮动元素后面直接跟一个静态元素 (元素属于常规流)，首先，浮动元素会在包含框左边界开始显示 (本例中是 "body" 元素)，然后，静态元素会跟浮动元素一样，从相同的边，相同的垂直高度开始显示。

浮动元素会覆盖在静态元素之上，除非静态元素具有左外边距 (a left margin)，左外边距会使静态元素向右移动，可以从浮动元素后面显示出来。静态元素也可以是 "cleared" (clear:left or clear:both)，这会使静态元素在浮动元素的下面显示。

具体的测试细节

绿色边框的盒子 (div#left) 在 "body" 中向左浮动，它后面跟一个紫色的盒子 (div#static) 。如果 div#static 没有 width ，那么所有的现代浏览器都会正确显示，紫色盒子会被绿色边框的盒子覆盖。

但是，因为 div#static 被定义了 width ，浏览器的差异就非常明显。"width" 这个声明，使得Internet Explorer 会把 div#static 放在浮动元素的边上，仿佛浮动元素成了 body 左边界的一部分。Moz/N7 和Op6/7.1 会参照规范，把两个盒子稳稳的固定在 body 的左边界上。

为什么会这样

复杂的浮动布局有时需要设置一些盒子的 "widths" ，但对一个跟在浮动元素后面的静态盒子这样做，会使IE与所有遵循标注的浏览器显示出不同的效果。如此不同的事实，使形式不可忽视。

所以选择只针对IE编码，知道少数浏览器将被打破，或者在多数情况下避免使用 "width" ，把多种类型的布局视为 "禁区" 。

IE6不是IE5.5

这里你看到到demo都是使用 像素 (pixel) 定义的，但是通常一个布局的宽度是使用百分比来定义的，至少是对那些在浮动元素之后的元素。当 div#static 使用百分比设置宽度width，IE5.5 会参照浮动元素边上有效的水平空白，然后说"现在定义的宽度是100%"。所以，如果 div#static 获得 "width:50%"，div的宽度是紧挨着浮动元素的空白宽度的一半，并且是从这个浮动元素边上开始显示。

然而，IE6 (标注兼容模式下)不同。IE6下div也紧挨着浮动元素开始，但是，当设置div#static的宽度时，它并不考虑浮动元素。它使用整个包含块的宽度作为100%，就像规范要求的那样。然而他确实是从浮动元素的边上开始这个div的。所以问题是，仅在IE6中存在 half-fixed ，对于我们新手来说，又是一个头疼的问题。

这意味着什么？如果div的宽度是100%，它是整个body的宽度，它又是从浮动元素的右侧开始放置，会引起一个滚动条 (我发现：div#static drop 了)。但仅在IE6中这样，说明这还不够坏。

原文地址：

http://positioniseverything.net/floatmodel.html