为什么它在没有隐藏溢出的情况下不起作用？

Question

当我在下面找到这个代码示例时，我正在研究 w3schools 上的 html / css。我想知道为什么它只在 ul 具有 "overflow: hidden; " 时显示列表由于overflow hidden的定义是：overflow被clip掉，其余内容将不可见

感谢您的每一个回答:)

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111111;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

Answer 1

举例：

接下来 div 秒中的图像是浮动的。第一个 div 具有 overflow:hidden; 的属性。在结果中可以看出，第一个 div 将通过调整大小来简化内容，但第二个 div 保持折叠状态。 float 属性有一种方法可以将元素从文档流中取出，但是 overflow:hidden; 可以恢复它。好像有点反直觉。

#div1, #div2 {
  border: 2px solid green;
  margin-bottom:5px;
 
  }

img {
  float:left;
  }

#div1 {
  overflow:hidden;
  }

<div id="div1">
<img src="http://placehold.it/200x100"></div>
<div id="div2">
<img src="http://placehold.it/200x100"></div>

为什么它在没有隐藏溢出的情况下不起作用？

Why doesnt it work without overflow hidden?

html

css

hidden

list

overflow