Html 为什么浮动元素后忽略html元素的上边距？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1883414/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why top margin of html element is ignored after floated element?
提问by Elias Zamaria
I have a page with 2 divs. The first one is floated. The 2nd one has a "clear: both" CSS declaration and a big top margin. However, when I view the page in Firefox or IE8, I don't see the top margin. It looks like the 2nd div is touching the first div, instead of being separated. Is there any way to make the top margin work properly?
我有一个带有 2 个 div 的页面。第一个是浮动的。第二个有一个“明确：两者”的 CSS 声明和一个很大的上边距。但是，当我在 Firefox 或 IE8 中查看页面时，我看不到上边距。看起来第二个 div 正在接触第一个 div，而不是被分开。有什么办法可以使上边距正常工作吗？
I have read the CSS spec and noticed that it says "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 didn't exist.". However, I don't know what to do about that.
我已经阅读了 CSS 规范并注意到它说“由于浮动不在流中，因此在浮动框之前和之后创建的非定位块框垂直流动，就好像浮动不存在一样。”。但是，我不知道该怎么办。
Here is an example:
下面是一个例子：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS test</title>
</head>
<body>
<div style="float: left; border: solid red 1px">foo</div>
<div style="clear: both; margin-top: 90px; border: solid red 1px">This div should not touch the other div.</div>
</body>
</html>采纳答案by T. Stone
You've correctly identified the problem. The floated <div>is no longer used to calculate the top margin, and therefor the 2 <div>'s just butt against each other. A simple way to solve this is just to wrap the 2nd <div>. This will allow the wrapper to (invisibly) butt up against the first <div>, and allow you to specify white space for it.
您已正确识别问题。浮动<div>不再用于计算顶部边距，因此 2<div>只是相互对接。解决这个问题的一个简单方法就是将 2nd 包装起来<div>。这将允许包装器（不可见地）对接第一个<div>，并允许您为其指定空白。
The trick to getting the wrapper to work right is to have the white space be internal white space. In other words, the wrapper uses padding instead of margin. This means whatever is going on outside the wrapper (like other floating elements) won't really matter.
让包装器正常工作的诀窍是让空白区域成为内部空白区域。换句话说，包装器使用填充而不是边距。这意味着包装器外部发生的任何事情（如其他浮动元素）都无关紧要。
<div style="float: left; border: solid red 1px">foo</div>
<div class="wrapper" style="clear: both; padding-top: 90px;">
<div style="border: solid red 1px">This div should not touch the other div.</div>
</div>回答by zerolab
you could simply add a div between them
你可以简单地在它们之间添加一个 div
<div style="float: left; border: solid red 1px">foo</div>
<div style="clear:both;"></div>
<div style="margin-top: 90px; border: solid red 1px">This div should not touch the other div.</div>
and that should take care of it.
这应该照顾它。
Lots of WordPress themes (and not only) employ this technique
许多 WordPress 主题（不仅如此）都采用这种技术
回答by glocsw
On the second div:
在第二个 div 上：
float: none; display: inline-block;
Compatibility table for browsers: http://caniuse.com/#feat=inline-block
浏览器兼容性表：http: //caniuse.com/#feat=inline-block
回答by Serge Stroobandt
An open-ended clear; without containers, nor extra <div>
一个开放式的清除；没有容器，也没有额外的<div>
Another answer was almost right, but missed a width: 100%. Here is the corrected version.
另一个答案几乎是正确的，但错过了一个width: 100%. 这是更正后的版本。
h1 {
clear: both;
display: inline-block;
width: 100%;
}
Clears without this width: 100%either require the floated element to be in a well marked off container or need an extra, semantically empty <div>. Conversely, strict separation of content and mark-up requires a strict CSS solutionto this problem, i.e. without any additional non-semantic HTML.
没有这个的清除width: 100%要么需要浮动元素在一个很好标记的容器中，要么需要一个额外的、语义上为空的<div>。相反，内容和标记的严格分离需要针对此问题的严格 CSS 解决方案，即没有任何额外的非语义 HTML。
The mere fact that one needs to mark off the end of a float, does not allow for unattended typesetting.
仅仅需要标记浮点数的结尾这一事实就不允许进行无人值守的排版。
If the latter is your goal, the float should be left open for anything (paragraphs, ordered and unordered lists etc.) to wrap around it, until a clear is encountered. In the above example, the clear is set by a new heading.
如果后者是您的目标，则浮动应该为任何内容（段落、有序和无序列表等）打开以环绕它，直到遇到清除为止。在上面的例子中，clear 是由一个新标题设置的。
This solution gets used extensively on my websiteto solve the problem when the text next to a floated miniature is short and the top-margin of the next clearing object is not respected. It also prevents any manual intervention when automatically generating PDFsfrom the site.
当浮动缩影旁边的文本很短并且不遵守下一个清除对象的上边距时，此解决方案在我的网站上被广泛使用以解决该问题。从站点自动生成PDF时，它还可以防止任何手动干预。
回答by Henrik Adolfsson
set "float:left" on the second div
在第二个 div 上设置“float:left”
回答by OrionRobillard
The problem is that the second div can only calculate a margin from a non floating element. You need to add any non floating element before you attempt to set the margin. A non breaking space or a line break outside the floated div and before the second div will work.
问题是第二个 div 只能从非浮动元素计算边距。在尝试设置边距之前，您需要添加任何非浮动元素。在浮动 div 之外和第二个 div 工作之前的不间断空格或换行符。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS test</title>
</head>
<body>
<div style="float: left; border: solid red 1px; height:40px;">foo</div>
<div style="clear: both; margin-top: 90px; border: solid red 1px">This div should not touch the other div.</div>
</body>
</html>
回答by J. M
another way is to add an empty paragraph with clear both after the last floated div.
另一种方法是在最后一个浮动的 div 之后添加一个带有 clear 的空段落。
<p style="clear:both"></p>
回答by C Stubbs
Add this below the floated div and above the one you want to push down the page:
在浮动的 div 下方和要向下推页面的 div 上方添加：
<div class="clearfix"></div>
Then in your css file add:
然后在你的 css 文件中添加：
.clearfix {clear: both;}
This in effect creates an invisible element that the margin of your second div can react against - this is something I've seen on a number of Wordpress sites. It also has the benefit of giving you somewhere (i.e. inside the clearfix div) to put any dividing elements such as borders etc.
这实际上创建了一个不可见元素，您的第二个 div 的边距可以对其做出反应 - 这是我在许多 Wordpress 网站上看到的。它还具有让您在某个地方（即在 clearfix div 内）放置任何分隔元素（例如边框等）的好处。
