Question

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

查看下面的屏幕截图：

原始代码：
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

解释：

这里发生了一些事情。

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

9 Visual formatting model - 9.5 Floats

由于浮动不在流中，因此在浮动框之前和之后创建的非定位块框垂直流动，就像浮动不存在一样。但是，根据需要缩短浮动旁边创建的当前和后续行框，以便为浮动的边距框留出空间。

在您的情况下，#header元素的子元素是浮动的。由于所有子元素都是浮动的，#header元素基本上会自行折叠，因为它没有任何维度。

这是一个视觉示例。如您所见，父级#header元素的高度为0：

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

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

Box Model 8.3.1 Collapsing margins

在CSS中，两个或多个框（可能是也可能不是兄弟）的相邻边距可以组合形成单个边距。据说以这种方式组合的边距会崩溃，因此产生的合并边距称为折叠边距。

可能的解决方案/解决方法：

正如您所指出的，我在向#header元素添加clearfix时解决了该问题。 clearfix基本上可以防止父元素自身崩溃，这意味着底部边距不会崩溃。

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

Example Here

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

Answer 2

您可以在删除以下样式后尝试吗？

body {
  margin: 0;
  padding: 0;
}

幽灵顶部身体边缘与浮动的分裂

2 个答案:

解释：

可能的解决方案/解决方法：