带有浮动 div 的幽灵顶部主体边距答案

【问题标题】：Ghost Top Body Margin With Floated Divs带有浮动 div 的幽灵顶部主体边距
【发布时间】：2016-02-22 08:40:45
【问题描述】：

我编写了以下代码并尝试将三个左浮动 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/

【问题讨论】：

标签： html css css-float margin

【解决方案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;
}

【讨论】：

【解决方案2】：

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

body {
  margin: 0;
  padding: 0;
}

【讨论】：

删除这个 css 重置代码不走运：（幽灵上边距仍然存在
@sri 边距不是来自body 元素。看我的回答。
@JoshCrozier 感谢您的详细解释。