浮动和绝对定位相遇 （参照《CSS世界》P190）
看下面这个例子：
<div class="nav">导航1</div>
<img src="new.png" class="follow">
<div class="nav">导航2</div>
.nav {
width: 100px;
line-height: 40px;
background-color: #333;
color: #fff;
text-align: center;
float: left;
}
.follow {
position: absolute;
}
结果
- 在 IE 和Chrome 浏览器下，夹在中间的<img>在中间显示（见图6-58 上），
-
但是Firefox浏览器却是在最后显示（见图6-58 下）。
浮动和无依赖绝对定位表现不一致.png
此处的浏览器不一致的行为表现应该属于“未定义行为”，没有谁对谁错，只是各自按照自己的渲染规则表现而已。
那为何IE 和Chrome 浏览器却在中间显示呢？
作者认为是这样的：浏览器对于DOM元素的样式渲染是从前往后、由外及内的，因此渲染顺序是先“导航1”，再“图片”，最后是“导航2”。当渲染到“图片”的时候，由于“导航1”左浮动，因此内联的图片跟在后面显示，此时由于设置了position:absolute，因此当前位置定位并不占据任何空间，再渲染“导航2”的时候，中间的“图片”基本上跟不存在没什么区别，因此也就和“导航1”紧密相连了，最终形成了“图片”在中间显示的样式表现。
Firefox浏览器下的定位位置或许比较好理解，因为和没有设置position:absolute 表现一致，符合我们对上面规则的理解。
对于上述场景，如果希望各个浏览器的表现都是一样的，<img>外层嵌套一层标签并浮动即可，注意，是外层标签浮动。由于浮动和绝对定位水火不容，本身设置浮动是没有任何效果的。
如下所示。
<div class="nav">导航1</div>
<div style="float:left">
<img src="new.png" class="follow">
</div>
<div class="nav">导航2</div>
