高度为0的块级元素的下外边距为什么没有效果？

[风动之石]

在看《CSS那些事儿》遇到一个问题，在两列定宽结构中，高度为0的块级元素（即#container）的下外边距没有起作用，请问是怎么回事？
效果图和代码如下：

* {
	margin:0;
	padding:0;
} /* 设置页面中所有元素的内外补丁为0，便于更便捷的页面布局 */
#header, #footer {
	width:960px;
	height:30px;
	background-color:#E8E8E8;
} /* 设置头部信息以及底部信息的宽度为960px，高度为30px，并添加浅灰色背景色 */
#container {
	width:960px;
	margin:10px 0;
} /* 设置页面内容区域的宽度为960px，并设置上下外补丁为10px */
.mainBox {
	float:left; /* 将主要内容区域向左浮动 */
	width:680px;
	color:#FF0000;
	background-color:#333333;
} /* 设置主要内容区域的宽度为680px，背景色以及文本颜色，并居左显示 */
.sideBox {
	float:right; /* 将侧边栏向右浮动 */
	width:270px;
	color:#FFFFFF;
	background-color:#999999;
} /* 设置侧边栏的宽度为270px，背景色以及文本颜色，并居右显示 */
#footer {
	clear:both;
} /* 清除内容区域的左右浮动 */

<div id="header">头部信息</div>
<div id="container">
	<div class="mainBox">主要内容区域</div>
	<div class="sideBox">侧边栏</div>
</div>
<div id="footer">底部信息</div>

[acbv512]

楼主想说那儿没有效果？

[风动之石]

引用 1 楼 acbv512 的回复:

楼主想说那儿没有效果？

中间的container里的元素都浮动了，所以container的高度为0，它与footer的间隔没有了~~这是为什么啊？但是它和header的间隔还有...

[低下头8吻你]

.sideBox {
            float:right; /* 将侧边栏向右浮动 */
            width:270px;
            color:#FFFFFF;
            background-color:#999999;
            margin-bottom:10px;
        } /* 设置侧边栏的宽度为270px，背景色以及文本颜色，并居右显示 */

[风动之石]

引用 3 楼 wj572225768 的回复:

谢谢你，我明白你的方法可以解决，也知道其他解决的方法，但是我想明白为什么高度为0的div的上外边距有效而下外边距无效？

[LoveAPI]

给container那个div清浮动，clearfix，你搜一下。

[LoveAPI]

子级元素浮动脱离了文本流，其实你的父级div是有margin-bottom的，只不过高度为0，所以需要清浮动，能明白不？

[vblj]

好吧，我发现我上面的说法有问题，自己也测试了一下，margin-bottom其实是存在的，只是因为container高度为0，所以就变成图片那样的效果。应该是由于内层div的浮动使外层div高度为0造成的，给外层div(container )设置overflow:hidden，或者给container设置高度都可以解决。

[风动之石]

引用 6 楼 LoveAPI 的回复:

子级元素浮动脱离了文本流，其实你的父级div是有margin-bottom的，只不过高度为0，所以需要清浮动，能明白不？

#container {
    width:960px;
    margin:10px 0;
} /* 设置页面内容区域的宽度为960px，并设置上下外补丁为10px */

这一行已经给div加了margin-bottom了呀，，我知道清除浮动可以显示出来，但是我想明白的是，为什么div高度为0的时候上外边距有效而下外边距无效？！！

[vblj]

楼主，float是相对于下个元素的，如两个div，第一个div float:right那么两个div就会在同一行上，第二个div会出现在右边。当然一个容器内只有一个元素的话也可以使用float，不过这样效果就类似于text-align了。你对sideBox设置了浮动对它的下一个元素就影响，你可以去掉sideBox的浮动，可以看到对footer的margin-bottom就出来了

[风动之石]

引用 9 楼 vblj862679691 的回复:

首先谢谢您这么热情的帮助我。 我也知道是因为内层div的浮动导致外层的高度为0，也知道许多解决的方法，但是我的问题是，为什么外层的div高度为0的时候上外边距有效而下外边距有效？ 我是想知道最根本的原因，，原理！

[world_broken]

任何可以触发 container的hasLayou的方法都可以解决问题。脱离布局流是针对后面元素，对于前面元素布局是有效的，可以通过设置mainbox或者sidebox的margin可以发现这点。

[LoveAPI]

引用 7 楼 cxl444905143 的回复:

[quote=引用 6 楼 LoveAPI 的回复:] 子级元素浮动脱离了文本流，其实你的父级div是有margin-bottom的，只不过高度为0，所以需要清浮动，能明白不？

#container {
    width:960px;
    margin:10px 0;
} /* 设置页面内容区域的宽度为960px，并设置上下外补丁为10px */

这一行已经给div加了margin-bottom了呀，，我知道清除浮动可以显示出来，但是我想明白的是，为什么div高度为0的时候上外边距有效而下外边距无效？！！[/quote] 我想是因为margin-bottom与margin-top重复而已，随意改变其中一个，空出的大小都是按最大的显示。

[LoveAPI]

引用 12 楼 LoveAPI 的回复:

[quote=引用 7 楼 cxl444905143 的回复:] [quote=引用 6 楼 LoveAPI 的回复:] 子级元素浮动脱离了文本流，其实你的父级div是有margin-bottom的，只不过高度为0，所以需要清浮动，能明白不？

#container {
    width:960px;
    margin:10px 0;
} /* 设置页面内容区域的宽度为960px，并设置上下外补丁为10px */

这一行已经给div加了margin-bottom了呀，，我知道清除浮动可以显示出来，但是我想明白的是，为什么div高度为0的时候上外边距有效而下外边距无效？！！[/quote] 我想是因为margin-bottom与margin-top重复而已，随意改变其中一个，空出的大小都是按最大的显示。[/quote]

<div style="width:100px;height:50px;background-color:#ff0000;margin-bottom:10px;">af </div>
<div style="width:100px;height:50px;background-color:#00ff00;margin-top:10px;">ffaf </div>

就像这两个，上面div的下外边距与下面div的上外边距重复了，应该就是外边距的空间共用。 换成padding时，你那个空隙就变成20px了。

[风动之石]

引用 13 楼 LoveAPI 的回复:

谢谢，真的是外边距合并...css没有系统学，不知道这么基础的知识，谢谢你的耐心帮助！