Question

我遇到了一些我不理解的CSS-请参考此笔：https://codepen.io/GregS2/pen/pGWrav 如果我从导航栏中删除了溢出：自动，则div折叠，只有其边框可见。（尽管，如果我将边框设置得很粗，则内容确实会再次可见）。到底为什么需要溢出：自动要求？

HTML：

<body>
  <header>
    <nav id="navbar">
      <h1 class="logo"> <a href="index.html">HBT</a> </h1>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
        </ul>
    </nav>
  </header>
</body>

CSS：

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Main styling */
html, body {
  line-height: 1.7em;
}


#navbar {
  background: #333;
  color: white;
  border: red solid 5px;

/* Removing the following line causes the navbar to collapse - why? */
  overflow: auto;

}

#navbar a {
  color: white;
}

#navbar h1 {
  float: left;
}

#navbar ul {
  list-style: none;
  float: right;
}

a {
  color: #333;
  text-decoration: none;
}

溢出：需要自动以防止DIV崩溃-但是为什么呢？

0 个答案: