为什么 float:left 会导致前元素向下移动一行答案

【问题标题】：Why does float:left causes pre element to move down one line为什么 float:left 会导致前元素向下移动一行
【发布时间】：2014-10-10 20:47:36
【问题描述】：

在 HTML 5 文档中，我尝试使用 float:left 并排放置两个前置元素，如下所示：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Pre and Float Test</title>
</head>

<body>
<pre style="float:left; margin-right:1em"> 1
 2
 3
 4</pre>
<pre>The quick
red fox
jumped over
the lazy brown dog.</pre>
</body>
</html>

Internet Explorer 9 以我期望的方式呈现 HTML，左侧 pre 元素的顶部与另一个 pre 元素的顶部对齐，如下所示：

但是，Google Chrome 和 Firefox 都在呈现文档时，其 pre 向左浮动，比另一个 pre 低一行，如下所示：

鉴于 Internet Explorer 的历史，我不得不相信 Chrome 和 Firefox 正确地遵循了标准。更有趣的是，当我将 pre 元素替换为 div 元素并在每行末尾使用 <br> 标签时，如下所示：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Pre and Float Test</title>
</head>

<body>
<div style="float:left; margin-right:1em"> 1<br>
 2<br>
 3<br>
 4</div>
<div>The quick<br>
red fox<br>
jumped over<br>
the lazy brown dog.</div>
</body>
</html>

左侧 div 不向下移动：

为什么标准要求左前下移？如何阻止 Chrome 和 Firefox 将左前向下移动？我知道如何使用 CSS "position:relative; top:-1em" 来解决它，但这似乎是一个等待破解的黑客。有没有更好的方法来阻止 Chrome 和 Firefox 将左前向下移动？

【问题讨论】：

我在 Firefox 和 Chrome 上没有这个问题。您能指定您使用的是哪个版本吗？
另外，你为什么要使用<pre>来布局页面，而你应该使用<div>、<span>等等。
因为我会将代码放在右边的 pre 元素中，并且 pre 尊重我在代码中的空白。
你看CodeMirror还是故意重新发明轮子？
这个项目我不能用JavaScript，CodeMirror是用JavaScript实现的。

标签： html css

【解决方案1】：

为什么标准要求左前下移？

它没有。区别仅在于“用户代理样式表”。 Firefox 和 Chrome 都使用：

pre {
  margin:1em 0;
}

由于浮动本身，浮动元素不再是流的一部分，它的上边距不能与主体上的默认边距一起折叠（在我的 Chrome 中为 8px）。然而，非浮动元素确实如此，因此它的边距correctly collapses，使它稍微高一点——准确地说是 1em 和 8px 之间的差异。

所引用的浏览器都不是“错误的”，在用户代理样式表中没有对此类细节的严格规定——除了特殊的无意义元素<div> 和<span>，根据他们的定义，它们应该没有样式，特别是边距或填充。因此，当替换为 div 时，元素会按预期呈现。

IE9 没有错，只是不同而已。显然它在后来的版本中被更改为更符合其他主要浏览器。

【讨论】：

【解决方案2】：

尝试删除pre 在某些浏览器上默认可能具有的边距：

pre {
    margin: 0;
}

pre {
  margin: 0;
}

<pre style="float:left; margin-right:1em"> 1
 2
 3
 4</pre>
<pre>The quick
red fox
jumped over
the lazy brown dog.</pre>

在这种情况下，只需删除 margin-top 就足够了。

还可以考虑使用此 CSS 重置：*{margin:0; padding:0;}

【讨论】：

这是解决问题的可能方法，但不能回答关于为什么会发生的实际问题。
@NielsKeurentjes 我的回答是，在某些浏览器上，pre 元素默认有一些边距。
嗯，是的，感谢您在我发表评论后对其进行编辑。此外，差异的真正原因在于与浮动元素相关的边距折叠，而不是边距本身的存在。如果只是边距，两个 <pre> 元素仍将与顶部的偏移量相同。
@NielsKeurentjes 我在 20:56:21Z 发布了我的答案，您在 21:02:07Z 发布了您的评论。这相差超过 5 分钟，所以如果我在您发表评论后编辑我的答案，您会在编辑历史记录中看到它。是的，您的回答更好地解释了原因，我的回答侧重于解决方案。
是的，这回答了我的原因。 Pre 有一个上边距。这也回答了如何“修复”它。很简单。一个很好的答案。

【解决方案3】：

如果您希望两个元素并排浮动，则不需要。给定父元素的大小，您可以将两个子元素的宽度设置为小于父元素的总和。然后将子元素设置为display:inline-block; 你会发现元素会以正确的顺序并排排列。如果子元素的总宽度大于父元素的宽度，则子元素将被推送到下一行。在计算元素的宽度时，您必须将边框和边距添加到元素的宽度。在计算元素的内部宽度时，您必须计算宽度减去左右填充。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Pre and Float Test</title>
</head>
<style>
#elmOne{
margin-right:1em;
}
#elmOne, #elmTwo{
display:inline-block;
}
</style>

<body>
<pre id="elmOne"> 1
 2
 3
 4</pre>
<pre id="elmTwo">The quick
red fox
jumped over
the lazy brown dog.</pre>
</body>
</html>

您很少需要使用浮点数。大多数情况下，当您想使用浮动时，您可以使用 position:[relative,fixed,absolute];不要让自己陷入漂浮地狱。

如果您只需要一个项目列表并为项目编号，那么您不需要并排放置两个元素。 http://www.echoecho.com/htmllists02.htm

你可以使用：

<ol>
<li>text</li>
<li>text</li>
<li>text</li>
</ol>

pre 标签用于以固定宽度字体显示，它同时保留空格和换行符。不用于列表，但用于文本布局。 http://www.w3schools.com/tags/tag_pre.asp

【讨论】：