浮动Div的Ghost上身保证金 [英] Ghost Top Body Margin With Floated Divs
问题描述
我编写了以下代码，并尝试将三个左浮动div放置在一个包含div的父亲中.由于某种原因，body标签似乎有一个幽灵顶边距，这是我的代码中未定义的属性.但是，如果删除包含div的margin-bottom属性或对其应用clearfix样式，则上边距将消失.什么原因导致幻影顶部边缘以及如何解决?谢谢！
I wrote the following code and tried placing three left floated divs in a father containing div. For some reason, the body tag seems to have a ghost top margin, which is a property not defined in my code. However, if I remove the margin-bottom property of the containing div or apply a clearfix style to it, the top margin is gone. What causes the ghost top margin and how to fix it? Thx!
查看以下屏幕截图:
-
原始代码:
Original code:
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/
推荐答案
说明:
这里发生了一些事情.
The explanation:
There are a few things occurring here.
当元素绝对定位为或(如您所用)时，它们将从文档的常规流程中删除.这是确认此情况的相关文档:
When elements are absolutely positioned or floated (as in your case), they are removed from the normal flow of the document. Here is relevant documentation confirming this:
由于没有浮子，因此在浮子盒之前和之后创建的未定位块盒将垂直流动，就好像该浮子不存在一样.但是，会根据需要缩短在浮点数旁边创建的当前和后续行框，以便为浮点数的边距框腾出空间.
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元素的子元素是浮动的.由于所有子元素的 all 都是浮动的，因此#header元素由于本身没有任何尺寸而实际上折叠在其自身上.
In your case, the children elements of the #header element are floated. Since all of the children elements are floated, the #header element essentially collapses upon it self since it doesn't have any dimensions.
这里是一个视觉示例.如您所见，父元素#header的高度为0:
Here is a visual example. As you can see, the parent, #header element, has a height of 0:
由于元素的高度为0，因此margin-bottom本质上充当margin-top，而
Since the element has a height of 0, the margin-bottom essentially acts as a margin-top, and the margin collapses with the body element.
I just answered a question about collapsing margins here, but here is the relevant documentation:
在CSS中，两个或多个框(可能是兄弟姐妹，也可能不是兄弟姐妹)的相邻边距可以合并为一个边距.以此方式组合的边距被认为是崩溃的，所得的合并边距被称为崩溃边距.
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本质上可以防止父元素自身折叠，这意味着底部边距不会折叠.
Possible solutions/workarounds:
As you noted, the problem is resolved my adding a clearfix to the #header element. The clearfix essentially prevents the parent element from collapsing upon itself, which means that the bottom margin do not collapse.
只需将overflow: hidden添加到元素中，就可以实现完全相同的效果:
You could achieve the exact same thing by simply adding overflow: hidden to the element:
#header {
margin-bottom: 20px;
overflow: hidden;
}
这篇关于浮动Div的Ghost上身保证金的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
