8 个答案:
答案 0 :(得分：172)
将overflow:auto添加到您的#page div。
答案 1 :(得分：33)
添加以下任一规则：
float: left/right;
position: absolute;
display: inline-block;
overflow: auto/scroll/hidden;
clear: left/right/both;
这是由collapsing margins引起的。请参阅有关此行为的文章here。
根据文章：
W3C规范定义了折叠边距如下：
“在本规范中，表达式折叠边距意味着两个或多个框(可能彼此相邻或嵌套)的相邻边距(没有非空内容，填充或边框区域或间隙将它们分开)结合形成一个边缘。“
对于父子元素也是如此。
所有答案都包含一个可能的解决方案：
在其他情况下，元素的边距不会崩溃：
浮动元素
绝对定位元素
内联块元素
将溢出设置为除可见之外的其他元素(它们不会与子项一起折叠边距。)
已清除的元素(它们不会使用其父块的下边距折叠其上边距。)
根元素
答案 2 :(得分：13)
问题是父母没有考虑儿童身高。添加display:inline-block;为我做了。
完整CSS
#page {
margin:0;
background:#FF9;
display:inline-block;
width:100%;
}
答案 3 :(得分：1)
添加以下规则：
overflow: hidden;
这是由于页边距缩小造成的。请参阅有关此行为here的文章。
根据文章：
如果父元素的第一个子元素没有上边距或上边距少，则将以使父元素看起来具有子元素的边距的方式呈现元素。因此，这可能会在满足这些条件的页面上的任何地方发生，但在页面顶部时最明显。
答案 4 :(得分：0)
我为XenForo 2.1制作样式时的方法，但它对您应该有用：
(请将这些LESS变量替换为您的实际值。此外，次边距的绝对值应与前后伪元素的高度相同。)
// The following two lines are to avoid top & bottom fieldset borders run out of the block body.
// (Do not tweak the CSS overflow settings, otherwise the editor menu won’t be float above the block border.)
&:before {content: “\a0”; display: block; width: auto; margin-bottom: floor(-1 * @xf-lineHeightDefault * @xf-fontSizeSmall – @xf-borderSizeMinorFeature);}
&:after {content: “\a0”; display: block; width: auto; margin-top: floor(-1 * @xf-lineHeightDefault * @xf-fontSizeSmall – @xf-borderSizeMinorFeature);}
答案 5 :(得分：0)
#page {
overflow: hidden;
margin:0;
background:#FF9;
}
答案 6 :(得分：0)
只需将border-top: 1px solid transparent;添加到您的#page元素中即可。
答案 7 :(得分：-1)
其他答案中的解决方案对我不起作用。透明边框，内联块等均引起其他问题。相反，我在祖先元素中添加了以下css：
parent::after{
content: “”;
display: inline-block;
clear: both;
}
根据您的情况，这可能会导致自身的问题，因为它在最后一个子元素之后增加了额外的空间。