css - 为什么 float :left required in navigation to keep text center when position:absolute applied to header?

Question

在 header 中观察到 CSS position : absolute 的一个奇怪的事情是，除非下面的菜单中有一个 float:left，否则菜单的文本不会居中垂直并保持在顶部。您可以通过全宽运行本页中给出的代码片段来查看这一点。我已经为 float:none in lower screen width 设置了一个媒体查询，它取消了在较高屏幕宽度中的 float:left。

现在，为什么会出现这种行为？为什么 float:left 在 position:absolute 应用于 header 时保持菜单文本垂直居中，反之亦然？我在搜索时没有找到任何关于此的内容。

编辑-

一些答案​​说这是由于边距“崩溃”而发生的。但他们没有解释为什么 h1 of header 没有“崩溃”并且以这种方式表现？为什么只有 h1 of menu 是“折叠”的？它似乎更像是一些元素的选择重叠而不是折叠。

编辑2-

请回答者，如果他们为了解释方便而想分解片段，除了片段的部分之外，他们还应该在他们的答案中提供完整的片段或其修改。因为 div 不是孤立的。答案应该有带有 position: absolute 的标题，它的 h1 和 margin-top 应用于标题下方 div 的 h1。

请看这个片段-

div.header {
    position: absolute;
    left: 0%;
    top: 0%;
    width: 100%;
    height: auto;
    text-align: center;
    color: #EE82EE;
    background-color: #000000;
}
.submenu {
 text-align: center;
  width:100%;
  margin:0;
  margin-top: 72px;
  color:black;
  height: 100px;
  background-color: red;
  float: left;
  padding:0px;
}
@media screen and (max-width: 766px){
  .submenu {
   float:none;
  }
}

<div class="header">
	<h1>HEADER </h1>
</div>
<div class="submenu">
  <h1>MENU</h1>
  
</div>

Answer 1

编辑:

正如我在评论中解释的那样，标题中的 h1 不会折叠，因为它使用了 position:absolute - 正如您在下面看到的那样，它是一个防止边距崩溃的修复程序。重叠只是因为您的标题是绝对定位的，所以它会出现在页面中其他所有内容的顶部。

概括地说，折叠边距发生在垂直边距接触 block 元素时没有分隔它们(例如边框或填充)未 float 、未绝对定位、未固定并且溢出:可见(默认值)。还有一些其他情况，但这涵盖了绝大多数原因，包括您的原因。

---

回答

您看到的是收缩边距的效果。

CSS 规范规定，当两个元素的垂直边距接触时，两个边距将合并为一个边距。

当第一个(或最后一个)子元素与父元素之间没有分隔时，父/子元素也会发生这种情况 - 在这种情况下，折叠的边距最终位于父元素之外。

在您的情况下，您的h1 具有浏览器样式表的默认边距。这是折叠到其父级的边距中，即默认情况下 submenu 元素，因为它是 block 元素。

防止 margin 折叠:
有很多方法可以防止 child 的 margin 折叠，包括:

• 漂浮
• position:absolute。
• 将显示更改为以下之一:“table-cell”、“table-caption”或“inline-block”。
• 添加可见以外的溢出，例如溢出:自动
• 在父子之间添加一个“分隔”，例如边框或填充。

当您将 float 添加到您的 child 时，这是防止边距折叠的方法之一，因此您的 h1 顶部的边距仍然有空间，其中包含“菜单”这个词。

查看一些示例:

.submenu {
 text-align: center;
  width:100%;
  margin:0;
  margin-top: 0px;
  color:black;
  height: 100px;
  background-color: red;
  float: none;
  padding:0px;
}
.container { border:2px solid #ff0;}
.container:after {
  content: "";
  display: table;
  clear: both;
}
h1{ margin:30px 0;}
.submenu.hasfloat {float: left;}
.submenu.hasoverflow {overflow: auto;}

<p>The top margin of this h1 is collapsed into the parent's margin. </p><p>The parent's top margin is 10px, and the h1 has a top margin of 30px, so when collapsed the parent now takes on the child's margin because it is larger - you can see the margin surrounded with the yellow border:</p>
<div class="container">
<div class="submenu">
  <h1>Collapsed</h1>
</div>
</div>
<p>The top margin of this h1 isn't collapsing because the parent is <b>floated</b>:</p>
<div class="container">
<div class="submenu hasfloat">
  <h1>Not collapsed</h1>
</div>
</div>
<p>The top margin of this h1 isn't collapsing because the parent has <b>overflow:auto</b> (i.e. any value other than visible):</p>
<div class="container">
<div class="submenu hasoverflow">
  <h1>Not collapsed</h1>
</div>
</div>

示例:显示即使标题未绝对定位，问题仍然存在。

div.header {
    position: relative;
    left: 0%;
    top: 0%;
    width: 100%;
    height: auto;
    text-align: center;
    color: #EE82EE;
    background-color: #000000;
}
.submenu {
 text-align: center;
  width:100%;
  margin:0;
  margin-top: 72px;
  color:black;
  height: 100px;
  background-color: red;
  float: left;
  padding:0px;
}
@media screen and (max-width: 766px){
  .submenu {
   float:none;
  }
}

<div class="header">
	<h1>HEADER <small>- position:relative</small></h1>
</div>
<div class="submenu">
  <h1>MENU <small>- top margin is still collapsing</small></h1>
  
</div>

引用资料:从以下位置阅读有关折叠边距的更多信息:

• > Mozilla.org: Mastering margin collapsing
• > W3.org CSS3 Specification
• > Sitepoint: Collapsing Margins
• > CSS Tricks:What You Should Know About Collapsing Margins