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

在看《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;} /* 清除内容区域的左右浮动 */

头部信息	主要内容区域	侧边栏底部信息

回复讨论(解决方案)

楼主想说那儿没有效果？

楼主想说那儿没有效果？

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

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

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

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

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

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

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

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

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

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

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

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

af ffaf