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

出处链接：http://www.5code.net

解决方法:通过给#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 >

转载于:https://www.cnblogs.com/blueDream2011/archive/2011/04/10/2011748.html