隐藏在水平菜单中的溢出

Question

在CSS中创建水平菜单时，为什么使用overflow:hidden来使该菜单可见？

type here

我想知道为什么我们应该使用溢出：隐藏，如下例所示：

www.w3schools.com/css/tryit.asp?filename=trycss_float5

Answer 1

<li>

内的

<ul>

元素具有样式

float: left;

当元素被赋予任何浮动样式时，它们将不再处于文档的正常流程中。当您将溢出设置为隐藏时，您将创建一个块格式化上下文。其中包含所有浮动元素，防止容器崩溃。

如果删除

overflow:hidden

样式，您将看到其他

<li>

元素消失，直到您将鼠标悬停在它们上方。 通过使用

overflow:hidden

，您可以确保父容器展开以包含其浮动子容器。 删除样式意味着父容器 (

<ul>

) 不再包含浮动子容器，因此它们变得不可见。将鼠标悬停在它们上方只会触发

:hover

样式。