css的导航栏里，ul{overflow: hidden;}到底起到什么作用呢，为什么去掉这一行，整个的背景色就消失了？
发布网友
发布时间：2022-04-28 12:58
共4个回答
懂视网
时间：2022-04-28 17:19
上面我们已经说了overflow:hidden最简单的作用就是溢出隐藏，下面我们来看一个具体示例：
<html>
<head>
<style type="text/css">
div
{
background-color:pink;
width:150px;
height:150px;
overflow: hidden;
}
</style>
</head>
<body>
<div>
愿中国青年都摆脱冷气，只是向上走，不必听自暴自弃者的话。
唯有民族魂是值得宝贵的，唯有它发扬起来，中国才有真进步。
愈艰难，就愈要做。改革，是向来没有一帆风顺的。
我们目下的当务之急是：一要生存，二要温饱，三要发展。
必须敢于正视，这才可望敢想、敢说、敢做、敢当。
</div>
</body>
</html>效果如下：
从上面效果中可以很明显的看出，文字超出的部分都看不到了，这其实就是overflow:hidden的溢出隐藏作用，那么，这些隐藏的部分是都没有了吗？当然不是，溢出隐藏的部分文字只是看不到了，但是实际还是存在的，如果你想要将隐藏的部分文字在你放上鼠标的时候显现出来，这就需要用到css中的伪类部分的知识，下面我们来看看具体的代码实例：
<html>
<head>
<style type="text/css">
div
{
background-color:pink;
width:150px;
height:150px;
overflow: hidden;
}
div:hover{
overflow: visible;
}
</style>
</head>
<body>
<div>
愿中国青年都摆脱冷气，只是向上走，不必听自暴自弃者的话。
唯有民族魂是值得宝贵的，唯有它发扬起来，中国才有真进步。
愈艰难，就愈要做。改革，是向来没有一帆风顺的。
我们目下的当务之急是：一要生存，二要温饱，三要发展。
必须敢于正视，这才可望敢想、敢说、敢做、敢当。
</div>
</body>
</html>效果如下：
上图的效果就是当鼠标放在文字上时，隐藏部分的文字就显示出来了。我们可以看到代码中多出了div:hover{overflow: visible;}，:hover就是css中伪类。
本篇文章到这里就全部结束了，更多其他精彩内容大家可以关注Gxlcms相关栏目教程！！！
热心网友
时间：2022-04-28 14:27
ul标签是块级元素padding，margin设置为0，而li标签设置了padding，所以li对于ul是溢出的
使用overflow:auto;可以使框架包含溢出元素。
overflow:hidden 的作用是：溢出被剪裁，其余内容将不可见。
而ul没有设置高度,li有高度（padding +margin +border+内容），故ul被撑大。
如果ul有高度，溢出将被隐藏。
热心网友
时间：2022-04-28 15:45
overflow: hidden
为了隐藏溢出，也就是li标签，他不能把li标签去掉，只能把li标签包在ul标签里面，所以这个时候ui标签变大了，把li标签baoqilail
热心网友
时间：2022-04-28 17:20
