html - float div 没有正确清除两者

Question

我正在尝试布置一个基本页面，但我的第二个 div 将其自身隐藏在最终将成为 jQuery slider 的下方。谁能帮我弄清楚为什么它没有按需要执行。

这是我的 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 可见

Answer 1

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

.floater{
    position:absolute;
}

Working jsFiddle demo

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