Question

我开始学习HTML，我在w3schools.com上练习。我对overflow: hidden代码行感到好奇。当我删除它时，为什么整个导航栏都会消失？我以为溢出只是为了隐藏滚动条？

＆＃13;

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover {
  background-color: #111;
}

＆＃13;

<ul>
  <li><a class="active" 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>

＆＃13;

Answer 1

浮动元素不会为其包含元素添加高度。添加overflow属性会得到包含ul高度（这是您的背景颜色来自的位置）。在您的网络浏览器中进行检查，注意当ul被移除时overflow高度变为0。

由于背景颜色/文字颜色，你没有看到任何东西。导航li元素仍然存在，但您在白色文本上看不到白色。您没有看到灰色背景，因为ul高度变为0。

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    /*overflow: hidden;*/
    background-color: #333;
}

li {
    float: left;
    background-color: red;
}

li a {
    display: block;
    color: blue;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}

.spacer {
  clear: both;
  padding-top: 20px;
  padding-bottom: 5px;
}

.withoverflow {
   overflow: hidden;
}

<!DOCTYPE html>
<html>
<body>
      
<div class="spacer">without overflow</div>
  
<ul>
  <li><a class="active" 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>

<div class="spacer">with overflow</div>

<ul class="withoverflow">
  <li><a class="active" 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 2

是溢出：隐藏除了滚动条之外还执行其他任务。你的ul不会消失，这里的问题是你添加浮动到li所以ul不会为浮动子（li）分配空间如果你添加溢出：隐藏到父（ul）它不会允许子溢出超出他的限制所以它会出现，您可以尝试添加border：1px solid red to ul并检查以便您可以理解这种逻辑。

隐藏溢出也会在有宽度和高度值时隐藏滚动条。

Answer 3

您的代码中存在float个问题。由于ul的孩子是浮动的，因此父母不会扩展以包含所有孩子。通常我们使用 clearfix 方法，允许父级获得正确的高度，即使其子级也是浮动的。

overflow: hidden; ou overflow: auto;与 clearfix 方法具有相同的解决此问题的能力。

你可以在这里更好地理解它：

What methods of ‘clearfix’ can I use?

清除方法

使用以下参数创建一个类clearfix：

.clearfix:after, .clearfix:before {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

现在，只需在要修复的父元素中添加此类。（在你的情况下是ul）

以下是您的代码的小提琴并使用 clearfix方法：

https://fiddle.jshell.net/vs3Lqt22/

Answer 4

简单来说，这是由于float属性因此，要解决此问题而不使用溢出，只需使用clearfix属性清除流。

在ul中添加class =“ clearfix” 并在样式中添加

.clearfix::after{
content:"";
clear:both;
display:table;
}

当我删除＆＃34; overflow：hidden？＆＃34;为什么隐藏导航栏？溢出有什么作用？

4 个答案: