解决IE6下浮动后的元素使用负margin被隐藏.

时间：2011-04-10 来源：深蓝色梦想

解决方法:通过给#box{position:relative}让它脱离文档流.

#box没使用position:relative情况下(IE6)的效果:

以上的效果给了#box{margin-top:-20px} 在IE6下负20的位置被吞噬掉了.

正常情况下:

整体代码:

<!DOCTYPE HTML>
<html>
 <head>
  <title> New Document </title>

    <style type="text/css">
        *{margin:0;padding:0;}
        ul{list-style:none outside none;}
        #test{height:100px;margin-top:55px;background:orange;}
        #box{height:50px;width:200px;background:red;margin-top:-20px;float:left;position:relative}
        #box2{height:50px;width:200px;background:green;margin-top:0px;float:right}
    </style>


 </head>

 <body>

            <div id="test">
                <div id="box">
                        box
                </div>
                <div id="box2">
                    box2
                </div>
            </div>
 </body>
</html>