css - 应用于容器 div 的框阴影切断了最后两个 float 的子 div

Question

我在包含其他 6 个 div 的 mainContent div 上应用框阴影，但框阴影应用于 mainContent div 的最后两个 float 部分的正上方分区。

jsfiddle

HTML:

<div id="mainContent">
    <div id="div1">
            <h1>Welcome to the Archive </h1>

            <h2>The Internet Archive, is a digital library of files and other cultural 
                artifacts in digital form.</h2>

    </div>
    <div class="div11">
            <h3>Archive 1</h3>

        <p>some info</p>
    </div>
    <div class="div12">
            <h3>Archive 2</h3>

        <p>info</p>
    </div>
    <div class="div13">
            <h3>Archive 3</h3>

        <p>info</p>
    </div>
    <div class="left">
            <h4>Jasdasdasdasd</h4>

        <p><em>some info on how to use the website</em>

        </p>
    </div>
    <div class="right">
            <h3>archive1</h3>

        <p>Most recently added archives comes here</p>
        <br />
            <h3>asdasdsd</h3>

        <p>Most recently added archives comes here</p>
    </div>

</div> 

CSS:

#mainContent {
    width:970px;
    padding-bottom:55px;
    /*equal to footers height*/
    background:#fff;
    margin-bottom:10px;
    padding:10px 10px 10px 10px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border-bottom-left-radius:3px;
    border-bottom-right-radius:3px;
    box-shadow: 0 0 20px #ccc;
}
.left {
    float: left;
    width: 250px;
    height:auto;
}
.right {
    float: right;
    width: 630px;
    margin: 0 0 20px;
    height:auto;
}

Answer 1

添加:

<div style="clear: both"></div>

在 div 结尾上方的底部。

http://jsfiddle.net/3LxkY/2/