为什么浮动元素后忽略html元素的上边距？答案

【问题标题】：Why top margin of html element is ignored after floated element?为什么浮动元素后忽略html元素的上边距？
【发布时间】：2010-12-25 09:36:59
【问题描述】：

我有一个包含 2 个 div 的页面。第一个是浮动的。第二个有一个“clear: both” CSS 声明和一个很大的上边距。但是，当我在 Firefox 或 IE8 中查看页面时，我看不到上边距。看起来第二个 div 正在接触第一个 div，而不是被分开。有什么办法可以让上边距正常工作吗？

我阅读了 CSS 规范并注意到它说“由于浮动不在流中，因此在浮动框之前和之后创建的非定位块框垂直流动，就好像浮动不存在一样。”。但是，我不知道该怎么办。

这是一个例子：

<!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>

【问题讨论】：

这里的所有想法似乎都有效。我将 T. Stone 的答案标记为正确的答案，因为它似乎是最优雅的，尽管很难决定。

标签： html css

【解决方案1】：

您已正确识别问题。浮动的<div> 不再用于计算上边距，因此 2 个<div> 只是相互对接。解决这个问题的一个简单方法就是包装第二个<div>。这将允许包装器（不可见地）与第一个 <div> 对接，并允许您为其指定空白。

让包装器正常工作的技巧是让空白区域成为内部空白区域。换句话说，包装器使用填充而不是边距。这意味着包装器之外发生的任何事情（就像其他浮动元素一样）都无关紧要。

<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>

【讨论】：

感谢您快速准确的回复。

【解决方案2】：

你可以简单地在它们之间添加一个 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>

这应该会解决它。

许多 WordPress 主题（不仅如此）采用了这种技术

【讨论】：

【解决方案3】：

在第二个<div>：

float: none; display: inline-block;

浏览器兼容性表：http://caniuse.com/#feat=inline-block

【讨论】：

【解决方案4】：

开放式清除；没有容器，也没有额外的`<div>`

另一个答案几乎是正确的，但错过了width: 100%。这是修正后的版本。

h1 {
    clear: both;
    display: inline-block;
    width: 100%;
}

没有这个width: 100% 的清除要么要求浮动元素位于一个标记良好的容器中，要么需要一个额外的、语义上为空的<div>。相反，内容和标记的严格分离需要严格的 CSS 解决方案来解决这个问题，即没有任何额外的非语义 HTML。

仅仅需要标记浮点数的结尾这一事实，不允许unattended typesetting。

如果您的目标是后者，则浮动应该保持开放，以便任何东西（段落、有序和无序列表等）环绕它，直到遇到清除。在上面的例子中，清除是由一个新的标题设置的。

此解决方案在my website 上广泛使用，以解决浮动缩影旁边的文本较短且不考虑下一个清除对象的上边距时的问题。当从站点自动生成PDFs 时，它还可以防止任何人工干预。

【讨论】：

您只是在此处为现有元素提供clear 属性以清除文档浮动，这是clear 的预期用途，而不是“clearfix”。 clearfix 通常是指用于清除布局浮动的 hack，并且根据定义涉及使用语义上的空元素或伪元素。有关示例，请参见 stackoverflow.com/questions/8554043/what-is-clearfix 和 stackoverflow.com/questions/211383/…。
@BoltClock 同意！我在回答中将“clearfix”一词替换为“clear”。我不知道“clearfix”是如此特定于布局。

【解决方案5】：

在第二个 div 上设置“float:left”

【讨论】：

【解决方案6】：

问题是第二个 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>
   &nbsp;
   <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>

【讨论】：

【解决方案7】：

在不添加额外 HTML 的情况下垂直分隔 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;margin-bottom:90px">foo</div>
     <div style="clear: both; border: solid red 1px">This div should not touch the other div.</div>
</body>
</html>

您不能使用边距属性相对于浮动框垂直定位块框，但浮动框可以相对于块框定位。

【讨论】：

【解决方案8】：

另一种方法是在最后一个浮动的 div 之后添加一个带有 clear 的空段落。

<p style="clear:both"></p>

【讨论】：

【解决方案9】：

在浮动的 div 下方和要向下推页面的上方添加：

<div class="clearfix"></div>

然后在你的css文件中添加：

.clearfix {clear: both;}

这实际上创建了一个不可见元素，您的第二个 div 的边距可以对其做出反应 - 这是我在许多 Wordpress 网站上看到的。它还有一个好处是可以在某个地方（即在 clearfix div 内）放置任何分隔元素，例如边框等。

【讨论】：

开放式清除；没有容器，也没有额外的&lt;div&gt;

开放式清除；没有容器，也没有额外的`<div>`