Question

正如我理解overflow和div一样，当我在这里删除overflow属性或将其设置为可见时，事情并没有像我期望的那样发生，也不理解为什么它在设置为隐藏时它会做什么，因为它在这里：

<!DOCTYPE html>
<html>
<head>
<style>
body {margin:2;}

.topnav {
  overflow: hidden;
  background-color: #000000;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #FF0000;
  color: black;
}

.topnav a.active {
    background-color: #4CAF50;
    color: white;
}
</style>
</head>
<body>

<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>

<div style="padding-left:16px">
  <h2>Top Navigation Example</h2>
  <p>Some content..</p>
</div>

</body>
</html>

根据我的理解，div是块元素，这意味着无论溢出属性如何，第二个div应该自动开始在上面div下面的下一行创建导航栏，但是如果我删除溢出或集合它可见，第二个div被推高并位于导航栏的顶部。这对我来说真的很奇怪，因为从我读到的关于溢出属性的内容来看，它应该影响它指定的div的元素，而不是它下面看起来与它无关的div。另外，据我所知，没有什么东西可以让我首先需要隐藏！

什么是溢出：隐藏在这段代码中？

0 个答案: