Html 分区'；当它们应该向下推时，它们会重叠

我正在建立我的第一个使用媒体查询的网站，到目前为止，除了一个问题外，进展相当顺利。当你缩小结果页面的宽度时，红色的div移到导航的后面，而不是和其他内容一起被按下

JSFiddle供参考：

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>

@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;
}

知道我做错了什么吗？我尝试了几种组合的

位置属性

，但到目前为止运气不佳。

添加

.slideshow {
    clear: both;
}

---

你是个救生员！谢谢我会尽快接受的。我知道这必须很简单。不用担心，很乐意帮忙！所以，我不能100%确定

clear

到底做了什么。我的页面在做什么，

clear

停止了？因为你的

.box

家伙不在任何类型的clearfixed包装内，他们正在破坏文档流。我会把它们放在一个包装器中（可能是一个

nav

标签），然后在它们上使用clearfix。请点击此处：