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

Question

我一直在寻找答案，但似乎找不到答案。我有一个奇怪的问题，我以前从未遇到过。这是一个链接

在我的header，我有div id="topHeader"，在这个我有div class="contentArea"。

topHeader有float和width,100%有background-color, 并且有和contentArea的宽度990pxmargin: 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;}