浮动元素对齐不一致答案

【问题标题】：Inconsistent alignment of a Floating Element浮动元素对齐不一致
【发布时间】：2020-08-08 17:50:14
【问题描述】：

总结

浮动元素与相邻非浮动元素的垂直对齐方式不一致，这种可变性取决于容器或父元素的border-top-width 值和overflow 值。什么给了？

背景

我在练习涉及<img> 元素的布局时遇到了这种情况。我上个月刚开始自学 HTML/CSS，所以如果这是因为我忽略了一些基本的东西，请给我讲讲。

详情

<div> 容器内有一个浮动元素和一个非浮动块元素。

浮动元素 (p1) 具有固定宽度和 0 边距。它在左/右方向上浮动。它是起始浮动元素（即第一个浮动到包含框的一侧）。

相邻元素 (p2) 是环绕 p1 的非浮动块。请注意，此处特意为 p2 指定了一个非零边距值，以表明 p1 和 p2 在下面解释的一种情况下未对齐。

包含元素 <div> 的填充为 0。

通过这种设置，我发现浮动元素 (p1) 至少可以通过两种方式相对于 border-top-width 和 overflow 定位自身：

浮动元素 (p1) 与相邻的非浮动元素 (p2) 对齐（即 p1 框的上边框与 p2 框的上边框对齐）。

CSS 规则：
div {border-top-width: 0px;}
和
div {overflow: visible;}

浮动元素（p1）改为与包含框或父元素。

CSS 规则：
div {border-top-width: non-0px;}
或
div {overflow: auto/hidden/scroll/}

请注意，在案例 2 中，任一规则本身就足以启用对齐。

代码

代码过于简单，看起来像这样：

HTML

<div>
    <img src="example.jpg">
    <p>Random text</p>
</div>

CSS

img {
    float: left;
}

/* floating element aligns with adjacent element */

div {
    border: none;
    overflow: visible;
}

或

/* floating element aligns with top border of container */

div {
    border-top-width: 1px;
    overflow: auto;
}

我在 jsfiddle 上举了一个例子：https://jsfiddle.net/tLumj9x7/

或者您可以使用下面的 sn-p 检查它：

/* <body>, <div> margin set to 0 to avoid interference  */
body {
  margin: 0px;
}

div {
  margin: 0px;
}

/* border drawn above the paragraphs to denote top border of 2nd <div> */
.div1 {
  border-bottom: 1px solid;
}

p {
  border: 1px solid;
}

/* floating paragraph: margin set to 0 to highlight unusual alignment */
.p1 {
  float: left;
  margin: 0px;
  width: 400px;
}

/* note that a <p> element has a default margin of 1em, so this declaration is just for demonstration */
.p2 {
  margin: 16px;
}

input#border:checked~div.div2 {
  border-top: 0.02px solid transparent;
}

input#overflow:checked~div.div2 {
  overflow: auto;
}

<form>
  <input type="checkbox" name="border" id="border" />container border-top-width: non-0<br />
  <input type="checkbox" name="overflow" id="overflow" />container overflow: auto / hidden/ scroll<br />
  <div class="div1">
  </div>
  <div class="div2">
    <p class="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
    <p class="p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</form>

问题

起始浮动元素的位置相对于它的包含元素（在我们的例子中是<div> 块）是如何确定的？
border-top-width 属性与盯着浮动元素的“锚定”有什么关系？
overflow 属性同上。在属性方面，overflow 是如何“从结构上”影响容器盒的？
在上述两种情况中，如果有的话，它显示了起始浮动元素的“默认”定位？
在不同但相关的注释上。如果我在向左浮动的 p1 浮动元素周围放置边距，它的左边距会与相邻的 p2 非浮动元素的左边距一起折叠。这是标准行为吗？我读到浮动元素的边距不会塌陷，所以我不确定我是否正确理解了这个概念。

这是我在 stackoverflow 上的第一篇文章，感谢您阅读我的问题！我是 Web 开发的新手，期待阅读您的回答。

【问题讨论】：

标签： html css alignment css-float

【解决方案1】：

一个浮动框将垂直放置在该框未浮动时的位置。在此处的情况下，它是其容器中的第一个元素，其顶部边缘与其容器的内容框的顶部重合。（您看到的效果差异是 div 容器的内容框上下移动。）
在初始情况下，p1 是浮动的，因此无法流动，因此没有什么可以阻止 p2 的垂直边距与其祖先崩溃。非 0 宽度边框 top 的存在意味着 p2 的上边距不再与 div 元素的上边距相邻（即它们被边框分开），所以边距不能一起折叠。
overflow:auto 的副作用是它会导致 div 建立块格式化上下文。块格式化上下文的后代的边距不会与建立块格式化上下文的元素的边距一起折叠。使 div 建立块格式上下文的更直接但更新的方法是为其设置 display:flow-root。
默认情况下，流入块框的相邻垂直边距折叠。所以 p 元素的默认上边距 (p2) 与 div 和 body 元素的上边距一起折叠，增加了 div 元素内容框顶部上方的边距，从而将浮动元素推低。
Collapsing Margins 影响垂直边距。使用水平边距，您看到的不是边距折叠，而是不同的效果。 p1 和 p2 相互重叠。 p2 并不完全围绕 p1，它的内容确实如此。发生的情况是 p2 由一堆线框组成。 p1 旁边的每个行框的左边缘与 p1 的右边距边缘重合。 p2 的左边距仍然触及包含 div 的内容框的左边缘，就像 p1 根本不存在一样，所以它不会影响这些行框的左边缘的位置，除非 p2 的左边距、边框和填充是大于 p1 的边距框的宽度。

【讨论】：

感谢您的回复，Alohci！我将尝试在下面写下我自己的答案，看看我是否正确理解了您的回答。

【解决方案2】：

尝试根据 Alochi 的回答回答我自己的问题，看看我的想法是否正确。谢谢你，阿洛奇！

本质上，如果一个浮动框是它的第一个元素容器，它的垂直对齐行为就像它的非浮动对应的将在其容器中（减去边距折叠）。也就是说，外上边缘浮动框（取决于它的margin，border），重合与包含块的内容边缘（即父元素）。
在border-top-width是否为0值的情况下，浮动框的定位实际上是一致的，因为它的外顶边与其包含的内容边重合堵塞。不同之处在于：1）周围没有边框包含块（其border-top-width 为 0），与浮动块相邻的非浮动块（在我们的例子中为 p2），与包含块的边缘一起折叠，无论容器margin是否为0，留下视觉无边距浮动块与其对齐的印象相邻的非浮动元件； 2）border-top-width 为非 0 在包含块周围，非浮动的上边距边缘块与包含块的顶部内容边缘重合，由于容器周围的边框将其分隔开来与其后代的边缘，留下视觉印象无边距浮动块与容器对齐，而不是与相邻的非浮动块。

感谢您的澄清。这也是我最初试图合理化对齐行为的方式。从那以后，我深入挖掘并找到了管理浮动定位的规则here。规则 #8 规定“浮动框必须放置在尽可能高的位置”，而规则 #4 规定“浮动框的外部顶部不得高于其包含块的顶部。”

在overflow的情况下，如果它的值是不可见的，那么为元素的布局创建块格式化上下文儿童（根据这些formatting context rules），边距位于顶部的任何子元素的容器的（根据margin collapsing rules），如如果前者包含在容器的内容边缘内。

感谢有关块格式上下文的提示！我不知道这个概念。我想知道在进行块格式化之前的格式化上下文是什么，如果有的话？

由于大多数块元素默认没有边框（例如 <html>、<body>、<div>，因为它们的overflow 是可见的默认情况下，“默认”场景是浮动框看似与相邻的非浮动块对齐，因为后者的任何边距都与包含块。
浮动元素未与任何其他非浮动元素一起流动容器内的元素，因此任何相邻的非浮动块定位自己，就好像浮动元素不存在一样。只有非浮动块的内容，其位置是静态或相对，环绕浮动块。

【讨论】：