为何该HTML页面的navbar类div需设置overflow:hidden？

这问题的核心是浮动元素导致的父元素高度塌陷，和你看到的“内容没溢出”没关系：

1. 浮动元素脱离文档流
   你的.navbar里的<a>和.dropdown都设置了float:left，浮动元素会跳出正常的文档流，父元素.navbar如果没有特殊处理，就会因为内部没有正常流元素支撑，高度被计算为0。这时候.navbar的背景色#333就显示不出来，看起来像是“消失”了，但内部的浮动元素其实还在页面上，所以鼠标悬停时能触发它们的样式。

2. overflow:hidden的实际作用
   这里它不是用来隐藏溢出内容，而是触发了BFC（块级格式化上下文）。当元素设置overflow:hidden（值不为visible）时，浏览器会为它创建一个BFC，BFC的特性之一就是会包含内部所有的浮动元素，让父元素能正确计算出包裹所有内容的高度，这样.navbar的背景色就能正常显示了。

3. 其他替代方案
   如果你不想用overflow:hidden，也可以用更明确的清除浮动方法：

   • 伪元素清除法（兼容性好）：

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

   • 使用display:flow-root（现代浏览器支持，无副作用）：

     .navbar {
       display: flow-root;
       background-color: #333;
     }
     

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