当我在下面找到这个代码示例时，我正在研究 w3schools 上的 html/css。 我想知道为什么它只在 ul 有“溢出:隐藏”时才显示列表； 由于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>最佳答案
举例:
下面div中的图片是 float 的。第一个 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>关于html - 为什么它在没有 overflow hidden 的情况下不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39934336/