溢出有什么影响：隐藏在这段代码中？

Question

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar

为什么在overflow:hidden .navbar中添加overflow时，如果没有它，左边是白色，文字在右边？此外，当我阅读有关属性的内容时，如何以及在此处应用TF_VAR_<variable>的目的是什么：

  

注意：overflow属性仅适用于带有a的块元素   指定的高度。

Answer 1

这完全是因为block formatting context
如果您删除const该元素的所有内容都显示在左侧，因为子元素具有overflow: hidden属性，并且没有float被清除的位置。

对于块格式化上下文，您可以参考此答案Why does overflow hidden stop floating elements escaping their container?

另请参阅：Parent Height doesn't follow their float children

Answer 2

首先，当您从导航栏中删除溢出：隐藏时，它会使菜单项消失，因为当时.navbar中没有背景且a和按钮标记都有color: fff;与页面背景颜色相同。

现在，为什么我们需要溢出：隐藏;在.navbar

因为.navbar内的所有子项都具有与之关联的 float 属性，并且浮动元素不会在正常文档流中占用任何空间。现在，如果子元素没有占用任何空间，那么父级（.navbar）的height属性为0。

要在子类浮动时维护父类的height属性，我们使用overflow: hidden;属性

希望有所帮助