原文：http://www.brunildo.org/test/IE_raf3.html

猫鱼：“box”一词译为“框（元素框）”而不是“盒子”，虽然“box model”很多地方译为“盒模型”。

猫鱼：为了更直观，本猫增加了在Opera和IE 7/6 内的截图，同时调整了原例中示例元素的宽度，其他未变。

猫鱼：截图中IE 6的效果使用的是 IE Tester v 0.3.2。

In the following test cases a relative positioned box contains, in the source code:

• an absolutely positioned box (with top:7px; left:50px)
• a float
• a clear (not always present)
• a static box (not always present)

在下面的示例的源代码中，一个相对定位框中包含:

• 1个 绝对定位框（position: absolute） (top:7px; left:50px)
• 1个 浮动框（float）
• 1个 清除浮动框（clear） (不是总存在)
• 1个 非定位框（position: static） (不是总存在)

In IE7-/Win, depending on the source order of these contained elements and sometimes on other factors like the hasLayout status of the clear and the width of the float, the absolutely positioned box may disappear. Before any case the contained elements and their source order are stated, as well as the result.

在IE 7-/WIN（Windows IE 7.0及更早的版本）中，有时候由于某些原因，绝对定位的元素框会消失，例如触发了hasLayout属性的清除浮动元素、设定了宽度的浮动元素等等。导致这样的问题，其原因是源文件内包含一定顺序的元素。

Notes: The relative container has a fixed width, so it has hasLayout. Without this, there are further problems besides the disappearing of the AP box. hasLayout also makes the container to enclose the float even in absence of the clear element. Such enclosing is obtained in other browsers with a :after content.

注：包含容器设定固定的宽度，为了在IE内触发hasLayout属性。如果不这样的话，除了绝对定位元素消失以外，还会有其他的问题。hasLayout也会使容易在没有清除元素的情况下包含浮动元素。对于其他浏览器通过使用“:after”来闭合浮动元素。

猫鱼：关于hasLayout属性的M$官方资料[英文]。

猫鱼：关于闭合浮动元素的问题，可以阅读闭合浮动元素的方法与差别。

Conclusions 结论

An AP box sometimes disappears when in the source code it is the preceding or the following sibling of a float. This condition doesn't always trigger the problem, but seems necessary for the problem to occur. So any box (even an extra dummy div) "separating" the AP box from the float in the source code (either being between them, or wrapping one of them) fixes the problem.

当一个绝对定位的框的前一个或者后一个兄弟元素是浮动框的时候，这个绝对定位框可能会消失。虽然这种情况不是一定出现，但是也要重视解决。因此，任意的元素框（甚至可以是空的div）将浮动框和绝对定位框在源代码中“分隔”开（放在两个框之间或者包围其中之一都可以），就可以解决这个问题。

Some cases (4a, 5a) require as further trigger that the float has 100% width. They are easily fixed giving to the float a -3px negative margin on the side opposite to the float direction (4b, 5b). These cases do not occur in IE7 (which suggests that a different bug could be involved.)

在某些测试中（4a, 5a）设定浮动元素的宽度（width）为100%才会出现此问题。可以设定与浮动方向相对方向的-3px边距（4b, 5b）来解决这个问题。在IE 7内不存在这个错误现象（说明这是由不同的bug引发的）。

Other cases (1, 2) require as further trigger a clear element with hasLayout. They could be fixed avoiding hasLayout on the clear element (1b, 2b), or omitting it altogether (4, 5). However these modifications are not always applicable. Moreover they may both cause other problems. See IE7- double top padding on a clear with no hasLayout and related bugs. Omission of the clear causes the margin-bottom of the float to be ignored (examples at floats and containers.)

另一些测试（1, 2）则是在清除浮动的元素触发了hasLayout属性时才发生。这种情况可以通过避免触发清除元素的hasLayout或者去除该元素（4, 5）来解决。然而这些修改并不一定适用。此外，他们还可以引起其他问题。参阅：IE7内没有hasLayout属性的清除元素造成双倍上补白（top padding）的问题[英]。浮动元素的下边距（margin-bottom）消失的问题原因也很明确：浮动和容器[英]。

As said previously, there are cases when the problem does not occur, even in presence of the triggering conditions. This could be related to the fact that the problem is "time-dependent", i.e. it depends on the timing of data arrival and on the rendering speed, see IE7-/Win: Time dependence of the disappearing of absolutely positioned boxes near to floats.

正如以前所说的，有时触发条件存在也没有发生问题。这可能是这一事实有关的问题是“时变” ，即它取决于数据的到达时间和渲染的速度，参阅：IE7-/Win: 浮动框旁的绝对定位框消失依赖于时间[英]。

回到猫窝Blog