为何需为ol元素设置overflow:hidden以实现X轴方向充分扩展？

你遇到的问题核心是**overflow: hidden的作用不止是处理溢出，它还会触发元素的块级格式化上下文（BFC）**，而BFC是维持你导航容器正常表现的关键。

具体原因： #

• 你的<li>元素设置了float: left，浮动元素会脱离正常的文档流。如果父容器（.menu_button_container）没有触发BFC，它无法感知到内部浮动元素的存在，会出现高度塌陷——也就是容器的高度变成0。
• 虽然你给容器设置了width: 100%，但因为高度为0，容器的灰色背景完全不可见，视觉上就会让你误以为容器没有在X轴方向扩展。实际上容器宽度还是100%，只是没有高度支撑，背景显示不出来。
• 当你保留overflow: hidden时，它触发了BFC，BFC会强制容器包裹住内部的浮动元素，容器的高度会被浮动元素撑开，同时width:100%的设置能正常生效，让容器背景铺满整个横向空间。

验证方法： #

你可以给.menu_button_container临时加个边框，比如border: 1px solid red，就能看到：

• 保留overflow: hidden时，边框会包裹住所有导航按钮，横向铺满屏幕；
• 删除后，边框会变成一条横向的细线（因为高度为0），但宽度还是100%。

替代方案（如果不想用overflow: hidden）： #

如果不想依赖overflow: hidden，可以用其他触发BFC的方式，或者清除浮动：

1. 伪元素清除浮动：

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

2. 使用display: flow-root（现代浏览器支持，专门解决浮动塌陷问题）：

.menu_button_container{
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  width:100%;
  display: flow-root;
}

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