Question

css的导航栏里，ul{overflow: hidden;}到底起到什么作用呢，为什么去掉这一行，整个的背景色就消失了？

如题





Answer 1

ul标签是块级元素padding，margin设置为0，而li标签设置了padding，所以li对于ul是溢出的

使用overflow:auto;可以使框架包含溢出元素。

overflow:hidden 的作用是：溢出被剪裁，其余内容将不可见。

而ul没有设置高度,li有高度（padding +margin +border+内容），故ul被撑大。

如果ul有高度，溢出将被隐藏。

Answer 2

因为你的ul标签是padding，margin为零的，所以默认是导航栏最上面一个空的位置，这个时候，li标签对他来说是溢出的，默认是visible的话是不会有问题的，你会看到一个一个的<LI>block，（因为你没有给li标签设置背景色他是默认白色的）如果设置了
overflow: hidden
为了隐藏溢出，也就是li标签，他不能把li标签去掉，只能把li标签包在ul标签里面，所以这个时候ui标签变大了，把li标签baoqilail

Answer 3

去掉那一行，你的ul就没有高度了，所以你的背景色也就显不出来了

追问

为什么去掉ul{overflow: hidden;}就没有高度了呢？我目前只知道这个属性是用来隐藏用的，所以我没法把两个的因果联系起来...