浮动和绝对定位相遇 （参照《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;
}

  结果

1. 在 IE 和Chrome 浏览器下，夹在中间的<img>在中间显示（见图6-58 上），

2. 但是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>