在代码中为什么删除 overflow:hidden;来自 css 风格的 ul，隐藏菜单？

Question

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #333;
}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: red;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
</ul>

<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>

https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar

删除overflow:hidden；来自 css 风格的 ul。菜单消失。我在 w3schools 网站上找到了这个例子，当我从 ul 的样式中删除 overflow:hidden 时，菜单被隐藏了。

Answer 1

ul 是块级元素。当 li 浮动时，它们不占用 space，因此 ul 的高度减少为 0。

现在在 ul 上声明溢出（除了可见的任何内容）会创建一个新的块格式上下文，这使得 ul 包含其子项并且不再是 0px 高度。

Answer 2

你的菜单没有消失，它还在！您可以像@Fran 建议的那样检查它，或者只需将鼠标悬停在它的区域上，您就会看到它突出显示。您遇到的行为是因为 overflow: hidden; 导致您的块出现新的格式，这意味着如果没有它，每个元素将遵循它自己的格式并以正常流程显示。查看此 link 以了解有关块格式化上下文的更多详细信息。

在代码中为什么删除 overflow:hidden;来自 css 风格的 ul，隐藏菜单？

In the code why does removing overflow:hidden; from ul in css style, hides the menu?

css

overflow