修复了 CSS 边距折叠答案

【问题标题】：Fixed for CSS Margin Collapsing修复了 CSS 边距折叠
【发布时间】：2011-03-16 13:19:52
【问题描述】：

假设我有类似 HTML

<body id="doc"> 

  <div id="container">
    ddd
  </div>

</body>

我的 CSS 是

#doc {
    margin-top:0;
    width: 480px; 
    height: 320px;
    background-color: red;   
    overflow:auto;
}

#container {
    text-align: center;
    width: 400px;
    background-color: green;
    margin: 10px; 
}

似乎使用溢出：自动没有帮助，有什么想法吗？

【问题讨论】：

一个简单的解决方法是在容器上使用填充而不是边距。
见这里：stackoverflow.com/questions/5249756/… - 我列出了许多“解决”这个问题的技术。

标签： html css

【解决方案1】：

通过 clear 强制下层向下延伸到最后一个元素：

<style>
    #doc {
        margin-top:0;
        width: 480px; 
        height: 320px;
        background-color: red;   
        overflow:auto;
    }

    #container {
        text-align: center;
        width: 400px;
        background-color: green;
        margin: 10px; 
    }


    #stretchmyparent {
      clear:both;
    }
    </style>

    <body id="doc"> 
      <div id="container">
        ddd
      </div>

      <div id='stretchmyparent'></div>
    </body>

【讨论】：