为何此导航代码中ul元素必须设置overflow属性？

核心原因 #

你的代码里<li>用了float: left，浮动元素会脱离正常文档流——简单说就是父元素<ul>在计算自身高度时，会直接忽略这些浮动的子元素，导致<ul>高度塌陷成0。这时候<ul>的深色背景完全看不到，浮动的<li>虽然实际存在，但因为没有父元素的包裹定位，视觉上就像整个导航栏“消失”了。

而overflow: hidden在这里的作用是触发<ul>的块级格式化上下文（BFC），BFC有个关键特性：会强制包含内部所有浮动元素，让父元素重新计算出正确的高度，把所有子元素都包裹进去，所以导航栏能正常显示。

替代解决方案 #

如果你不想用overflow: hidden，可以用下面两种更稳妥的方式：

1. 用clearfix清除浮动 #

给<ul>添加一个清除浮动的类，通过伪元素修复高度塌陷：

/* 定义clearfix类 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  /* 移除overflow: hidden */
}

li {
  float: left;
}

然后修改HTML：

<ul class="clearfix">
  <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>

2. 改用Flex布局（推荐） #

放弃浮动，用更现代的Flex布局实现导航，代码更简洁，也不会有高度塌陷问题：

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  display: flex; /* 启用Flex布局 */
}

li {
  /* 移除float: left */
}

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

li a:hover {
  background-color: #111;
}

内容的提问来源于stack exchange，提问作者Nurlan_Jalilov