Html 浮动div未正确清除两者

我试图有一个基本的页面布局，但我的第二个div是把它自己塞进一个最终将成为jQuery滑块的下面。有人能帮我弄清楚为什么它没有做它需要做的

这是我的Css:：

body{
background-image:url('background-body.png');
background-repeat:repeat;
}

#mainWrap{
    clear:both;
    top:20%;
width:600px;
height:500px;
background-color:#c0c0c0;
margin-left:auto;
margin-right:auto;
position:relative;
box-shadow:10px 10px 10px #000000;
}

.floater{
position:absolute;
margin-bottom:25px;
width:100%;
height:300px;
top:0;
z-index:1;
border:solid 1px;
background-color:white;
box-shadow:0 10px 10px #000000;
display:block;
clear:both;


}

#footer{
bottom:0;
position absolute;
width: 100%;
border:dashed 1px;
height: 60px;
background-color:white;
}

</style>

和基本的html我到目前为止。

edit:：js fiddleRemove position:absolute，因为这会从流中删除元素，从而导致元素重叠

.floater{
    position:absolute;
}

---

如果您需要滑块的绝对定位，请将其应用于滑块中的子对象。

它现在的外观有什么问题？请在JSFIDLE中演示。

.floater{
    position:absolute;
}