Html 使用960网格系统css定义的div超出了它所在的可扩展div

我使用12列960网格系统来设计我的布局。这是我的HTML代码

<div class="topStrip"></div>
    <div class='container_12 content'>
        <div class="topStrip"></div>
        <div class="menuStrip">
            <div class="grid_3 menu"></div>
        </div><!-- end menuStrip -->
        <div class="mainContent">
            <div class="grid_4  dash_1"></div>
        </div><!-- end mainContent -->
        <div class="footer"></div>
    </div><!-- end content -->

您可以在下面提供的JSFIDLE链接中检查CSS

问题是

.mainContent

Div内的字段，即

.dash_1

正在退出

.content

Div-

但是，如果我删除

.grid\u 4

并从

.mainContent

内的div中增加

.dash\u 1

，它将相应地扩展-

---

这可能是CSS的一个简单问题，但是我发现了这个问题。提前感谢。

您的网格4上有浮动。你必须清除他的父母（主要内容）。这样写：

.mainContent {
    overflow: hidden;
    position: relative;
    margin-top: 50px;
}

更多信息，请阅读本文

---

选中此项，这是因为网格宽度为300px

看到这个了吗

.container_12 .grid_4 {
    width:300px;
}

---

不确定是什么问题。。。我运行JSFIDLE并在firebug下测试它。所有潜水艇都就位了。我错过什么了吗？顺便说一句，不同部分之间的使用情况如何？宽度不是问题所在，高度是问题所在，但现在问题已经解决。按照链接中提到的方式检查SandepNice链接的答案，我将使用clearing div，因为overflow:hidden似乎存在兼容性问题