为何在CSS水平菜单中使用overflow:hidden属性？

咱们先说说水平菜单的常见实现逻辑：为了让菜单项横向排列，一般会给<li>标签加float: left，让它们并排显示。但问题来了——浮动元素会脱离正常的文档流，简单说就是父容器（比如包裹菜单的<ul>）会“看不到”这些浮动的子元素，结果就是父容器的高度会塌陷成0，直接导致菜单布局乱套：要么菜单项和下面的页面内容重叠，要么父容器的背景、边框啥的都显示不出来。

那overflow: hidden到底干了啥？它能触发父容器的块级格式化上下文（BFC）。BFC有个关键特性：它会把内部所有浮动的元素都包裹进去，强制父容器重新计算自身高度，刚好能容纳所有菜单项。这样一来，父容器就能正常撑起高度，菜单的布局也就稳了。

拿你提到的例子来说，要是把<ul>的overflow: hidden去掉，你会发现菜单的父容器高度直接变成0，菜单项可能会跑到页面其他内容的上面，整个排版彻底乱掉。

顺便提一句：触发BFC的方法不止这一种，比如给父容器加float、display: inline-block或者position: absolute也能行，但overflow: hidden是最省心的——只要你的菜单没有需要弹出到容器外面的元素（比如下拉子菜单），用它基本没副作用。

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