div的浮动内容，破坏div（CSS问题）

Question

我找到了答案，但似乎找不到答案。我有一个奇怪的问题，我以前从未遇到过它。这是一个LINK

在我的header中，我有div id="topHeader"，其中我有div class="contentArea"。

topHeader有float和width 100%，background-color，contentArea的宽度为990px和margin: 0 auto;

contentArea中有浮动的任何内容都会破坏contentArea（例如，我想在contentArea的顶部和底部应用填充，但它似乎只是应用于顶部并推迟内容。

同样的问题在页脚contentArea中发生，您可以使用Firebug清楚地看到，

感谢您的回复。

Answer 1

从float: left;的所有元素中删除width: 100%;。

然后在所有浮动元素的末尾添加<div class="clear"> </div> 。

.clear {
 clear: both;
}

Answer 2

当你浮动元素时，父容器没有环绕在这种情况下浮动的子元素，你需要添加一个像这样的clearfix

.group:before,
.group:after {
    content: "";
    display: table;
} 
.group:after {
    clear: both;
}
.group {

}

将此添加到您的css然后将类组添加到已浮动子项的任何元素，此clearfix在所有浏览器中具有完全兼容性

Answer 3

不确定这是否是您想要的，请尝试添加：#topHeader .contentArea {overflow:hidden;}