浮動(dòng)和絕對定位相遇 （參照《CSS世界》P190）
看下面這個(gè)例子：
<div class="nav">導(dǎo)航1</div>
<img src="new.png" class="follow">
<div class="nav">導(dǎo)航2</div>
.nav {
width: 100px;
line-height: 40px;
background-color: #333;
color: #fff;
text-align: center;
float: left;
}
.follow {
position: absolute;
}
??結(jié)果
- 在 IE 和Chrome 瀏覽器下，夾在中間的<img>在中間顯示（見圖6-58 上）穆刻，
-
但是Firefox瀏覽器卻是在最后顯示（見圖6-58 下）代嗤。
浮動(dòng)和無依賴絕對定位表現(xiàn)不一致.png
??此處的瀏覽器不一致的行為表現(xiàn)應(yīng)該屬于“未定義行為”，沒有誰對誰錯(cuò)，只是各自按照自己的渲染規(guī)則表現(xiàn)而已拓诸。
??那為何IE 和Chrome 瀏覽器卻在中間顯示呢碱鳞？
??作者認(rèn)為是這樣的：瀏覽器對于DOM元素的樣式渲染是從前往后桑李、由外及內(nèi)的，因此渲染順序是先“導(dǎo)航1”窿给，再“圖片”贵白，最后是“導(dǎo)航2”。當(dāng)渲染到“圖片”的時(shí)候崩泡，由于“導(dǎo)航1”左浮動(dòng)禁荒，因此內(nèi)聯(lián)的圖片跟在后面顯示，此時(shí)由于設(shè)置了position:absolute角撞，因此當(dāng)前位置定位并不占據(jù)任何空間呛伴，再渲染“導(dǎo)航2”的時(shí)候，中間的“圖片”基本上跟不存在沒什么區(qū)別谒所，因此也就和“導(dǎo)航1”緊密相連了热康，最終形成了“圖片”在中間顯示的樣式表現(xiàn)。
??Firefox瀏覽器下的定位位置或許比較好理解劣领，因?yàn)楹蜎]有設(shè)置position:absolute 表現(xiàn)一致姐军，符合我們對上面規(guī)則的理解。
??對于上述場景剖踊，如果希望各個(gè)瀏覽器的表現(xiàn)都是一樣的庶弃，<img>外層嵌套一層標(biāo)簽并浮動(dòng)即可，注意德澈，是外層標(biāo)簽浮動(dòng)歇攻。由于浮動(dòng)和絕對定位水火不容，本身設(shè)置浮動(dòng)是沒有任何效果的梆造。
如下所示缴守。
<div class="nav">導(dǎo)航1</div>
<div style="float:left">
<img src="new.png" class="follow">
</div>
<div class="nav">導(dǎo)航2</div>
