html - Div 在应该向下推时重叠

Question

我正在使用媒体查询构建我的第一个网站，到目前为止一切顺利，只剩下一个问题。当您减小结果页面的宽度时，红色 div 会移到导航后面，而不是与其余内容一起被向下推。

JSFiddle 引用: http://jsfiddle.net/SimplyAzuma/nPceX/18/

HTML:

<div class="container">
  <div class="box">News</div>
  <div class="box">Events</div>
  <div class="box">Menu</div>
  <div class="box">Gallery</div>
  </br>
  <div class="slideshow"></div>
    <div class="contentarea">
      <div class="content">
        CONTENT TEXT HERE
      </div>
  </div>
</div>

CSS:

@media (min-width: 851px) {
.container {
    width:816px;
    margin:0 auto;
}
}

@media (max-width: 850px) {
.container {
    width:408px;
    margin:0 auto;
}
}
@media (max-width: 430px) {
.container {
    width:204px;
    margin:0 auto;
}
}

.box {
text-align:center;
line-height:23px;
margin:1px;
float:left;
clear:none;
width:200px;
height:25px;
border:1px solid #525252;
background:#363636;
}

div.box:hover {
color:#292929;
background:#CDCDCD;
font-weight:bold;
}

.contentarea {
font-size:14px;
margin:2px 1px 0px 1px;
height:100%;
border:1px solid #525252;
background:#363636;
color:#CDCDCD;
}

.content {
margin:0 5px 5px 5px;
}

.slideshow {
margin:8px 1px 0px 1px;
height:200px;
border:1px solid #525252;
background:#ff4444;
}

知道我可能做错了什么吗？我已经尝试了几种 position 属性的组合，但到目前为止都没有成功。

Answer 1

添加

.slideshow {
    clear: both;
}