无法弄清楚为什么背景颜色包括边距！答案

【问题标题】：Can't figure out why background-color is including the margins!无法弄清楚为什么背景颜色包括边距！
【发布时间】：2011-07-19 02:51:51
【问题描述】：

代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
    <title></title>

    <style type="text/css">

    * {border: 0px; padding: 0px;}

    #greenbox
    {
        margin: 20px;
        border: 5px solid green;
    }   

    #redbox
    {
        background-color: red;
        margin: 20px;
        float:left;
        width:50%;
    }

    #bluebox
    {
        background-color: blue;
        margin: 20px;
        width: 50%;
    }


    </style>
</head>
<body>

    <div id="greenbox">

        <div id="redbox"> red box </div>

        <div id="bluebox"> blue box </div>

    </div>
</body>
</html>

根据 W3C 页面，背景色应该只为内容、内边距和边框区域“着色”；不是边距。然而，尽管红框和蓝框文本之间有一个 20px margin，但由于某种原因，蓝框的背景颜色似乎包括了上边距。我理解折叠边距的概念，但在这里似乎没有意义。

谁能弄清楚发生了什么？

【问题讨论】：

标签： css margin background-color

【解决方案1】：

id "redbox" 的底部边距被忽略的原因是它向左浮动。如果您删除浮动，您将看到边距得到尊重。

如果您确实需要浮动“redbox”，那么您可以在“bluebox”上指定“clear:both”以使边距得到尊重。

通常任何浮动的东西都需要在之后清除。

【讨论】：

【解决方案2】：

我认为您需要在 #redbox 和 #bluebox 上添加“overflow: hidden”。

【讨论】：

【解决方案3】：

这是因为#redbox 是浮动的。删除float: left 看看你的期望。

【讨论】：

【解决方案4】：

我想通了。

如果你在蓝框周围设置边框，你会发现蓝框实际上是在红框的后面，大概是因为红框是浮动的，因此超出了正常流程。

解决方案是使用overflow: auto 声明。

【讨论】：