可以利用before和after伪类产生两个旋转一定角度的阴影来实现，比如：
<style>section {
POSITION:relative
margin:36px 50px
width:640px
height:200px
background-color:#fff
border:10px solid #ff0
}
section:before {
position:absolute
z-index:-1
left:20px
bottom:10px
width:80%
height:20px
content:""
transform:skew(-18deg) rotate(-3deg)
-webkit-transform:skew(-18deg) rotate(-3deg)
-moz-transform:skew(-18deg) rotate(-3deg)
box-shadow:0 20px 20px #666
}
section:after {
position:absolute
z-index:-2
right:20px
bottom:10px
width:80%
height:20px
content:""
transform:skew(18deg) rotate(3deg)
-webkit-transform:skew(18deg) rotate(3deg)
-moz-transform:skew(18deg) rotate(3deg)
box-shadow:0 20px 20px #666
}
</style>
<section></section>
浮动没有脱离文档流，你用的相对定位也没脱离文档流。你对相对定位和浮动的理解都有问题，买本书重新学了来。你需要的是用：
相对定位嵌套绝对定位(自己百度下这句话)
父div相对定位，然后里面子元素即图片采用绝对定位。html结构要改成这样：
<div><img src="xxx.gif" /></div>
