這是我以前博客里寫的東西，現在搬過來和大家分享一下！
逐步解決遇到的各種bug，是web前端開發者逐步成長的過程！
今天在做項目時，遇到了ie6下絕對定位元素莫名消失的問題，在此寫個簡單的例子說明一下此類問題的解決辦法。
如果我們想得到如下效果該怎么辦呢？
1 首先是基本的布局，此處不細說了。如果我們想讓最外面的框具有可擴展性，即紅色的框不設置高度，我們該怎么辦呢？通常我 們有一下幾個辦法來解決浮動子標簽自動撐開父標簽高度的問題：
a 在子標簽最后加一個清浮動的div{<div style="height:0;clear:both;overflow:hidden;"></div>}。
b 父標簽css樣式添加{overflow：hidden；}。
d 給父標簽設置float屬性。（如果父標簽浮動了，可能對布局有影響，需要在父標簽外再套一個讓整體居中的標簽。）
2
通常為了減少工作量，少敲幾個代碼，我都會選擇在父標簽css樣式中添加{overflow：hidden；}。但今天在做項目時，遇到了麻煩。首先看一下我最初的寫法。
<style type="text/css">
/*重置{*/
html{color:#000;background:#fff;}
body,div{padding:0;margin:0;}
.clear{clear:both;height:0px;overflow:hidden;}
/*}重置*/
.outer{width:1040px;border:1px red solid;position:relative;margin:20px auto;}
.con2{width:600px;height:200px;float:left;border:1px blue solid;margin:20px;display:inline;}
.con1,.con3,.con4,.con5{width:300px;height:200px;float:left;border:1px blue solid;margin:20px;display:inline;}
.mask{width:300px;height:200px;background:#f00;opacity:0.5;filter:alpha(opacity=50);position:absolute;left:-100px;top:40px;color:#fff;line-height:200px;text-align:center;font-size:30px;}
</style>
</head>
<body>
<div class="outer">
<div class="con1"></div>
<div class="con2"></div>
<div class="con3"></div>
<div class="con4"></div>
<div class="con5"></div>
<div class="mask">我是蒙版層</div>
<div class="clear"></div>
</div>
</body>
看一下ie6下效果：
我們會發現蒙版層有一部分被遮住了，且ie6下紅色框的底部與里面子元素的空隙也沒有了（非ie6中有），也就是說，子元素沒有把父元素的高度完全撐開。蒙版層被遮住是因為我們在父標簽css樣式中添加了
{overflow：hidden；}。
為了解決這兩個問題，我就把
父標簽css樣式
{overflow：hidden；}刪除，並且在最后一個子元素后面添加一個div，<div class="clear"></div>，
clear的css樣式為.clear{clear:both;height:0px;overflow:hidden;}。此時神奇的ie6發揮它神奇的作用了：蒙版層消失了！！見圖：
此時chrome中的效果（正常顯示）如下：
為了解決這一問題，我在網上搜尋答案，原來這是一個老bug了，大神們給出了答案：
絕對定位的元素跟浮動的兄弟標簽之間插入一個空的div標簽就ok了。至此需要解決的問題解決了。
總結來說，最好的解決方法就是：
在最后加入一個清浮動的div（CSS: .clear{clear:both;height:0;overflow:hidden;} HTML:<div class="clear"></div>），在絕對定位的元素和浮動元素間加入一個空div<div style="height:0;overflow:hidden;"></div>。
有趣的現象
：
在寫這個例子的過程中，我發現了一個
有趣的現象。如果我們給這個蒙版加個半透明的效果，css樣式如下：{opacity:0.5;filter:alpha(opacity=50);}。當我們刪除以上所說的那個空div，定位的蒙版層依然存在。也就是說filter濾鏡起到了作用。
總之一句話：ie6很神奇，需要我們不斷的摸索。希望有一天，ie6能去找上帝玩！！