浮动内容的div，扰乱div（CSS问题）

我已经找了一个答案，但似乎无法找到一个。我有一个奇怪的问题，我从来没有遇到过。这里有一个LINK 浮动内容的div，扰乱div（CSS问题）

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

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

凡是处于具有浮子的contentArea，破坏contentArea（例如，我想申请填充到contentArea的顶部和底部，但它似乎只适用于顶部和推下的内容。

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

感谢您的回复。

2013-02-12 Allan

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

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

.clear { clear: both; }

2013-02-12 18:08:31 KBN

我以为我需要漂浮在背景颜色上？并加入'

'糟糕的标记？我会给他们一个，我的煎饼后，它是星期二的煎饼！感谢您的回复。 – Allan 2013-02-12 18:23:23

加'

'是100％有效。而且我不明白你的意思是“需要背景颜色的浮动物”，如果我猜对了，没有你不需要浮动。 – KBN 2013-02-12 18:27:04

嗨，很抱歉现在才回来，已经尝试了你说的话，现在似乎正在工作（只是将它添加到标题中，现在将添加到页脚），也许你可以只看一眼就可以了。谢谢你，谢谢其他人的回复。 – Allan 2013-02-12 22:03:01

当浮动元素的父容器不围绕在这种情况下，浮动的子元素包裹，你需要添加一个clearfix这样

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

}

添加到您的CSS再加入一类组有浮动孩子的任何元素，这clearfix具有在所有浏览器

2013-02-12 18:28:51 iConnor

不知道的完全兼容，如果这就是你想要的东西，尝试补充一点：#topHeader .contentArea {overflow:hidden;}

2013-02-12 18:32:26

回答