浮動內容的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

回答