麻烦定位div几个浮动左div

Question

描述css问题有点棘手，但我会尽我所能。

在我的导航栏下面，我有一个容器div。它设定为80％宽。

在容器div中，我有一个box-wrapper div，它包含四个全部为float:left;的div。它们就是这样，它们可以根据用户的浏览器大小一次下载一个。

在包装盒下面是另一个box-wrapper2 div，它包含四个未浮动的div。

它们出现在另一个之上。

问题是由于某种原因，box-wrapper2 div正在向上移动并且在盒子包装器后面。我希望它位于顶部包装器下方。

我该怎么做？

这是我正在谈论的页面： http://www.rattletree.com/index2.php

如果您使用firebug并将鼠标悬停在第一个“programDetail”div上，您可以看到它在上面的div下面。

感谢您的帮助！

Answer 1

有关解决问题的更多选项，请参阅此链接：http://www.quirksmode.org/css/clearing.html

选项1。 我相信您可以将容器div设置为overflow:hidden;，这将清除它们并将第二个容器向下撞击，这样就没有重叠。

选项2。 你应该在浮子下方设置一个div来清除它们。有几种方法可以做到这一点，但最简单的方法是使用css clear:both

在你的花车下面设置另一个div

旁注：请务必将清算div设为height:0;line-height:0;display:block;，以确保其不会在容器底部添加任何时髦空间

---

修改 自上次提出（并回答）这个问题以来，实现预期效果的新方法已经改变。通常的做法是使用以下样式的容器div：

.container:before, 
.container:after {
 display: table;
 line-height: 0;
 content: "";
}
.container:after {
 clear: both;
}

这种方法被流行的框架使用（例如 - Zurb Foundation＆amp; Twitter Bootstrap）

Answer 2

如果我理解了这个问题，我相信你应该应用这些风格......

.boxWrapper {
    border: 1px solid red;
    float: left;
    height: 100%;
    width: 100%;
}

.programDetailWrapper {
    border: 1px solid red;
    float: left;
    height: 100%;
}