带有浮动 Div 的 Ghost Top Body 边距

Question

我写了下面的代码，并尝试在包含 div 的父亲中放置三个左浮动的 div。出于某种原因，body 标签似乎有一个幽灵顶部边距，这是我的代码中未定义的属性。但是，如果我删除包含 div 的 margin-bottom 属性或对其应用 clearfix 样式，则上边距消失了。是什么原因导致重影顶部边距以及如何解决它？谢谢！

查看以下屏幕截图：

原码：
Margin-bottom 移除：
- 应用了 Clearfix 样式：

这个原码：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <style>
            html {
                font: 16px/2 Tohoma, Verdana, Arial, Sans-serif, 'Microsoft YaHei';
                background: #ccc;
            }

            body {
                margin: 0;
                padding: 0;
            }

            .clear-fix:after {
                content: '';
                display: block;
                clear: both;
            }

            #wrap {
                margin: 0 auto;
                width: 1000px;
                min-height: 800px;
                background: #fff;
            }

            #header {
                margin-bottom: 20px;
            }

            .first, .second, .third {
                float: left;
                padding: 20px;
                min-height: 100px;
            }

            .first {
                background: gray;
            }

            .second {
                background: blue;
            }

            .third {
                background: yellow;
            }
        </style>
        <title>
            Another Web Page
        </title>
    </head>
    <body>
        <div id="wrap">
            <div id="header">
                <div class="first">This is the first floating division</div>
                <div class="second">This is the second floating division</div>
                <div class="third">This is the third floating division</div>
            </div>
        </div>
    </body>
</html>

原代码预览：http://jsfiddle.net/qv8ph0gw/

Answer 1

能不能去掉下面的样式试试？

body {
  margin: 0;
  padding: 0;
}

Answer 2

解释：

这里发生了一些事情。

当元素绝对定位或浮动时（如您的情况），它们将从文档的正常流中移除。这是确认这一点的相关文件：

9 Visual formatting model - 9.5 Floats

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist. However, the current and subsequent line boxes created next to the float are shortened as necessary to make room for the margin box of the float.

在您的例子中，#header 元素的子元素是浮动的。由于所有子元素都是浮动的，因此 #header 元素基本上会自行折叠，因为它没有任何尺寸。

这是一个直观的例子。如您所见，父元素 #header 的高度为 0:

由于元素的高度为 0，因此 margin-bottom 本质上充当 margin-top，而 margin collapses 与 body 元素。

我刚刚回答了一个关于collapsing margins here的问题，但这里是相关文档：

Box Model 8.3.1 Collapsing margins

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

可能 solutions/workarounds:

如您所述，通过向 #header 元素添加 clearfix，问题已解决。 clearfix 本质上是防止父元素自行折叠，这意味着底部边距不会折叠。

您只需将 overflow: hidden 添加到元素即可实现完全相同的效果：

Example Here

#header {
  margin-bottom: 20px;
  overflow: hidden;
}

带有浮动 Div 的 Ghost Top Body 边距

Ghost Top Body Margin With Floated Divs

html

css

margin

css-float

解释：

可能 solutions/workarounds: