Question

如果检查以下代码：

＆＃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;

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<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>

</body>
</html>

＆＃13;

对于元素浮动到左侧的导航栏，似乎必须设置＆＃34; ul＆＃34;的溢出属性。 as＆＃34;隐藏＆＃34;。如果未设置此属性，则导航栏将完全消失。为什么是这样？

由于

Answer 1

如果你不这样做，我猜<ul>不在文本流程中。在这里执行此操作的正确方法是不使用overflow属性，而是使用float: left;

Answer 2

这与所谓的块格式化上下文有关。建立一个新的BFC意味着它负责自己的布局，特别是在处理浮动元素时。

你也可以写overflow: auto。基本上，除visible（默认值）之外的任何其他溢出值都会使导航栏可见。

在此处详细了解BFC：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

为什么需要将溢出设置为＆＃34;隐藏＆＃34;导航条可见？

2 个答案: