假設我有我的網頁放置三個<div>小號,:爲什麼這個塊div影響兩個浮動div？
<div id="left" class="test" style="float:left;"></div>
<div id="right" class="test" style="float:right;"></div>
<div id="footer">footer</div>
這個CSS：
.test{ background:black;height:200px;width:200px;}
#footer{ background:yellow;margin:20px 0 0 0;}
我要的是：
margin: 20px;結果如下：
但我不知道爲什麼浮動的div也有相同幅度的#footer。他們是浮動的，所以他們獨立於其他元素，爲什麼#footer會影響他們？
以及clear:both的頁腳，只需添加周圍的元素的容器「包裝」的div將停止這種情況的發生 - example
實際的頁腳添加clear: both;不會給你之間的差距爲20px浮動和頁腳要麼，你實際上需要將20px底部邊距添加到浮動 - 原因都鏈接到clearance or non clearance，它與Collapsing Margins
你說你想知道爲什麼會發生這種情況，在你的OP場景中，這是因爲Collapsing Margins。
您沒有參與最初的例子間隙，所以是彩車被刪除，所以頁腳距仍在毗連，因此與中，body元素的崩潰，所以body元素是一個獲得利潤，然後因爲浮標實際上仍在body之內，所以他們也得到了保證金。
正如我上面提到的創建包裝div以「包含」，浮動停止了這種情況發生，因爲摺疊的規則也是如此。但是，您選擇包含浮動，要麼使用overflow:hidden，要麼通過浮動「包裝器」來停止此交互，因爲..從崩潰邊緣的部分：
是 建立新的塊格式化 背景元素的垂直邊距（如用「溢出」花車和元素 比「看得見」等） 不塌陷他們流入 孩子。
你看，無論是性能，浮動，「比其他可見溢出」爲手段，以「遏制浮動孩子」 - 實際上，他們正在建立一個新的塊格式化內容，但容易說話最知道「含浮動」;）
現在，一旦你有，能解決你的第一位，但這時如果你決定在頁腳介紹clear:both，現代的瀏覽器將不把浮體和之間的20像素的保證金頁腳..這實際上是正確的..從clear屬性（我的粗體）的部分：
然後間隙量設定爲 中較大的：
必要把塊的邊界邊緣即使 最低 浮子的底部外邊緣的量的將被清除。
將塊的頂部邊緣放置在其假想位置 所需的數量。
爲了將浮體下方的頁腳的頂部邊緣（在您的示例），瀏覽器必須引進間隙，這遠遠超過20像素因此它遵循規則1的200像素。如果頁腳上邊距是220像素，則邊距將大於所需的任何間距，因此它將遵循規則2.
所以，如果您確實希望頁腳在浮動塊下方不超過20像素它們的高度是，你可以將20px作爲底部邊距放到兩個浮標上，所以它通過清除規則1清除了浮標，無論哪個浮動時間最長，都需要缺口/保證金。
PS：不要測試在IE7或低於上述 - 我希望這不是太無聊了;）
向#footer CSS添加clear: both。這應該使頁腳呈現在浮動div下方，並帶有您想要的頁邊空白。
其實我知道我怎麼能解決我的問題，但是，我的奇蹟是，爲什麼發生這種情況？ – hh54188 2011-04-10 03:52:30
試試這個，這可能會解決你的問題：
<div id="right" class="test" style="float:right;"></div>
<div id="left" class="test"></div>
<div id="footer">footer</div>
CSS保持不變。
我做了一個試驗發現此頁面有兩個盒子前，用右浮動一個受到左邊第一個（後面跟着）的影響：http://jsfiddle.net/4r75s/
防止父div如果只包含浮動內容時崩潰的溢出技巧似乎在這裏工作，即設置溢出爲隱藏，自動或滾動。我裹着他們在一個包含分區做到這一點，它的工作原理：http://jsfiddle.net/4r75s/1/
#container {
overflow: hidden;
}
我不能（：http://jsfiddle.net/xrsPN/這裏的jsfiddle）重現此。在我的測試中，「left」和「right」沒有頂部邊距。 – zdyn 2011-04-10 06:47:50
@ZYDN在你的測試中你沒有重置默認的身體填充，所以填充是停止與身體邊距相鄰的頁腳邊緣 - 所以沒有邊緣崩潰 - 重置（通常在今天使用）將重置HTML和身體的默認 – clairesuzy 2011-04-10 08:43:02