html - 浮动 div 不能正确清除两者

Question

我试图有一个基本的页面布局，但是我的第二个 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。

</div>

<div id="nav">
</div>

<div id="mainWrap">

</div>

<div id="footer">
</div>

编辑:: http://jsfiddle.net/EnGKs/ js fiddle<-- 如您所见，二级 div 在顶部的下方，我需要它来清除顶部的 div，以便整个 div 可见

Answer 1

Remove postition:absolute，因为这会从流中删除元素，因此导致它重叠。

.floater{
    position:absolute;
}

工作 jsFiddle 演示

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