Question

以下是代码：

<!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页面，背景颜色应该只对内容，填充和边框区域进行“着色”;不是利润。然而，虽然红色框和蓝色框文本之间有2 0px margin，但由于某种原因，蓝框的背景颜色似乎包括上边距。我理解崩溃边缘的概念，但这似乎没有意义。

有人能弄清楚发生了什么吗？

Answer 1

id“redbox”上忽略底部边距的原因是因为它向左浮动。如果你移除浮子，你会看到边缘被尊重。

如果您确实要求“redbox”浮动，那么您可以在“bluebox”上指定“clear：both”以获得要遵守的边距。

一般来说，任何浮动的东西都需要在之后清除。

Answer 2

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

Answer 3

这是因为#redbox是浮动的。移除float: left以查看您的期望。

Answer 4

我明白了。

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

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

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

4 个答案: