html - 垂直对齐和 float : left

Question

我无法理解 float 属性。我有这段代码:

#p1 {
  border: solid black 3px
}

<p id="p1" style="float:left">Paragraph 1</p>
<a href="https://facebook.com" style="float:left"> This is a link </a>
<p>Paragraph 2</p>
<p>Paragraph 3</p>

现在，我期望的结果是第一行有 Paragraph1，然后是它旁边的链接，然后是链接旁边的 Paragraph2，第二行是 Paragraph3。但是这段代码给我的结果是这样的:

Answer 1

你得到看似奇怪的结果的原因是你 float 的元素上的边框、边距和填充。

默认情况下， float 元素将 float 到其容器元素的顶部和左侧/右侧，取代任何已经存在的元素。对于 float 元素，它们向左浮动，并将“第 2 段”推到右侧。如果您检查第 1 段，您会发现它具有浏览器的默认样式，顶部和底部的边距为 16 像素(在我的浏览器 Chrome 上)。查看“这是一个链接”元素，您会发现它没有边距。因此，第 1 段被其上边距和 3 像素的上边框向下推 19 像素，而“这是一个链接”可以 float 到靠在封闭元素的顶部。

如果你想让段落1、2和“this is a link”排成一行，最简单的做法是将段落1的border/margin设置为0，这样两者在垂直上方的间距就相等了文本。如果您想要第 1 段周围的粗边框，请调整其他两个元素的边距以在顶部留出 3 像素的空间。

p {
   margin: 0;
}
.floatL {
    float: left;
}    

<p id="p1" class="floatL">Paragraph 1</p>
<a href="https://facebook.com" class="floatL"> This is a link </a>
<p id="p2">Paragraph 2</p>
<p>Paragraph 3</p>

这是第 1 段带有边框的示例:

p {
   margin: 0;
}
#p1, #p2, a {
   border: 3px solid black;
}
#p2, a {
   border-color: transparent;
}
.floatL {
    float: left;
}    

<p id="p1" class="floatL">Paragraph 1</p>
<a href="https://facebook.com" class="floatL"> This is a link </a>
<p id="p2">Paragraph 2</p>
<p>Paragraph 3</p>