假设我有我的网页放置三个<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