我编写了以下代码，并尝试将三个左浮动 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/
最佳答案
解释:
这里发生了一些事情。
当元素绝对定位或 float 时(如您的情况)，它们将从文档的正常流程中删除。以下是确认这一点的相关文档:
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 元素的子元素是 float 的。由于所有子元素都是 float 的，#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.
可能的解决方案/解决方法:
正如您所指出的，通过向 #header 元素添加clearfix 解决了问题。 clearfix 本质上是防止父元素自身折叠，这意味着底部边距不会折叠。
只需将 overflow:hidden 添加到元素即可实现完全相同的效果:
#header {
margin-bottom: 20px;
overflow: hidden;
}
关于html - 带有 float Div 的 Ghost 顶部主体边距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33816870/