`overflow:hidden` 在下面的例子中做了什么？ [复制]答案

【问题标题】：What does `overflow:hidden` do in the following example? [duplicate]`overflow:hidden` 在下面的例子中做了什么？ [复制]
【发布时间】：2016-10-23 20:31:00
【问题描述】：

我的问题是，如果我从这段代码中删除 overflow:hidden，我的整个导航栏都将被隐藏，那么 `overflow:hidden;在这个例子中行动。

ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgb(100, 100, 100);
}

li{
  float: left;
}

li a{
  padding: 10px 30px;
  display: block;
  text-decoration: none;
  color: white;
  font-family: sans-serif;
}

li a:hover{
  background-color: rgb(50, 50, 50);
}

<ul>
  <li><a href="#" class="active">Home</a></li>
  <li><a href="#">Gallery</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Store</a></li>
  <li><a href="#">Form</a></li>
</ul>

【问题讨论】：

请学习格式化代码。
在您的情况下，overflow: hidden 告诉拥有float 的孩子的父母扩大到其孩子的大小。
感谢 @LGSon 回答我的问题，我完全理解您的解释。再次感谢！

标签： html css

【解决方案1】：

在您的情况下，overflow: hidden 告诉拥有float 的孩子的父母扩大到其孩子的大小。

overflow: auto 也会这样做，就像下面的示例一样，这将使内容在空间不足的情况下滚动，hidden 将隐藏同样的内容

ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  background-color: rgb(100, 100, 100);
}

li{
  float: left;
}

li a{
  padding: 10px 30px;
  display: block;
  text-decoration: none;
  color: white;
  font-family: sans-serif;
}

li a:hover{
  background-color: rgb(50, 50, 50);
}

<ul>
  <li><a href="#" class="active">Home</a></li>
  <li><a href="#">Gallery</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Store</a></li>
  <li><a href="#">Form</a></li>
</ul>

【讨论】：