Question

我在绝对定位的div（标题）下面设置了一个左浮动div（导航）。除了左浮动div我还有另一个div（文章），边距略大于浮动div的宽度（通常用于两列布局）。两者，导航和文章获得4em的上边距（标题高度为3em）导航div的额外边距为4em。我可以解决这个问题，但我的问题是：为什么额外的保证金。如果我省略标题的绝对定位，它看起来像我期望的：标题 - 边距 - 导航和文章在一行。代码：

 * {
    box-sizing: border-box;
  }

  body { /*schalte voreinstellung Browser aus */
    margin: 0px;
    padding: 0px; 
  }
  header {
    position: absolute;
    top: 1px;
    left: 0px;
    height: 3em;
    width: 100%;
    padding: 10px;
    border: 1px solid blue;
    border-radius: 0.5em;
    background-color: silver;
  }
  nav {   
      float: left; 
      width: 17em; /*breite relativ zum Buchstaben "m" in der aktuellen Schriftgroesse */
      border: 1px dashed red; /*Rand und padding jedoch in pixel */
      margin-top: 4em;
      padding: 5px;
    }
  
  
  article {
      margin: 4em 1em 0em 18em; /* top right bottom left */
      padding: 0px 10px;
      border: 1px dashed red;
      min-width: 15em;
  }

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Layout</title>
</head>
  <body>
    <header>
      headline - position fixed w&uuml;rde sie fest halten 
    </header>
    <nav>
      <h2> Navigation </h2>
      <ul>
	<li> hier die links </li>
      </ul>
    </nav>

    <article>
      <h1>CSS-basierte Layouts</h1>
      <h2>2 Spalten</h2>
      die ziemlich leer sind
    </article>

  </body>
</html>

Answer 1

当您绝对定位标题时，布局的其余部分就像标题从不存在一样。

因此，在不考虑标题的情况下，我们会查看三个主要布局元素：正文，导航和文章。

发生了什么，因为标题现在与布局的其余部分无关，文章成为身体的第一个流入子，因此其顶部边缘与身体的边缘坍塌（见Why does this CSS margin-top style not work?）。这会导致身体被推下并且物品的边缘与身体齐平，使得看起来文章根本没有被调整过。

另一方面，导航是浮动的，因此从流动中取出。浮动元素上的边距不会与其祖先一起折叠，因为浮动元素不在流中。因此，它的边缘，而不是文章的边缘边缘，与身体齐平。

当你停止定位标题时，它仍然是身体的第一个流入子项。文章的上边距现在与标题的下边缘折叠，而不是身体的上边缘。由于标题实际上没有任何边距，并且导航和文章的顶部边距相等，这导致后两者相互对齐。

浮动div和绝对定位div下方的div会产生额外的余量 - 为什么？

1 个答案: