逻辑上如何溢出叉子？ [英] How logically overflow forks?

问题描述

问候

我想制作一个导航菜单。使用以下代码：

  ul  {
  list-style-type  ：  none;  
 边距 ：  0;  
  padding  ：  0;  
 溢出 ： 隐藏;  
  background-color  ： ＃a1a1a1;  
} 

一切正常，但如果我删除：

 溢出：隐藏; 

菜单背景消失。如何

 溢出：隐藏; 

在此代码段中是否合乎逻辑？



这是小提琴地址：

JSFiddle



我的尝试：



我无法理解背后的逻辑< pre lang =CSS> 溢出：隐藏;

。

解决方案

这是一种旧技术，可确保父元素的高度扩展到包含浮动的子元素。没有它，< ul> 的高度会折叠为零，因此背景颜色无效。



清除浮动的技术All About Floats | CSS-Tricks [ ^ ]

CSS：清除浮动溢出 - Web Designer Wall - 设计趋势和教程 [ ^ ]



对于现代浏览器，您可以使用Flexbox作为替代方案。删除 li {float：left; } 规则，并将 overflow：hidden; 替换为 display：flex; on ul 规则：

更新小提琴 [ ^ ]

Flexbox完整指南CSS-Tricks [ ^ ]

我可以使用...... Flexbox [ ^ ]

Greetings
I want to make a navigation menu. Using the code below:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #a1a1a1;
}

everything works fine, but if I remove:

overflow: hidden;

the menu background disapears. How

overflow: hidden;

logically works in this code segment?

Here is the fiddle address:
JSFiddle

What I have tried:

I can't understand the logic behind

overflow: hidden;

.

解决方案

It's an old technique to ensure that the parent element's height expands to include the floated children. Without it, the <ul>'s height collapses to zero, so the background colour has no effect.

Techniques for Clearing Floats | All About Floats | CSS-Tricks[^]
CSS: Clearing Floats with Overflow - Web Designer Wall - Design Trends and Tutorials[^]

For modern browsers, you could use Flexbox as an alternative. Remove the li { float: left; } rule, and replace overflow:hidden; with display:flex; on the ul rule:
Updated Fiddle[^]
A Complete Guide to Flexbox | CSS-Tricks[^]
Can I use... Flexbox[^]

这篇关于逻辑上如何溢出叉子？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！