下面的边框为什么添加了overflow: hidden; 就可以显示出来了

.page_nav{

width: 100%;

height: 60px;

line-height: 60px;

border: 1px solid black;

overflow: hidden;

}

张提 2019-04-26

源自：前端油画商城案例 3-5 商品展示-4

3

收起

4回答

XO鸡丝 2019-06-08 17:46:24

看图，后面的课有提到。

好帮手慕阿莹 2019-06-01 19:26:22

同学你好，老师又重新试了一下：

其实这两个元素都没设置具体的高，要靠内容撑起了

而这些li又设置了浮动，

所以，这个黑色边框其实是跑上去了：

这里，这个overflow: hidden;其实是做了清除浮动的作用，如果同学不记得了，可以复习一下第二阶段浮动部分的课程呦。

如果我的回答解决了你的疑惑，请采纳！祝学习愉快！

好帮手慕柯南 2019-04-27 09:58:14

同学你好！首先边框没有显示是因为page_nav 中的内容超出了page_nav的范围，而边框属于page_nav，导致page_nav的边框被隐藏，添加overflow: hidden;的目的是隐藏超出的部分，也就是隐藏page_nav 中超出page_nav范围的内容，这样边框就会出现了。如果我的回答解决了你疑惑，请采纳，祝学习愉快~

慕慕4841039 #1

为什么隐藏超出部分，反而把隐藏了的边框显示了

2019-04-27 17:51:45
好帮手慕柯南回复慕慕4841039 #2

同学你可以这么理解，边框属于父亲，但是呢孩子太大了，把父亲盖住了，然后父亲应用了overflow: hidden;属性把孩子超出的隐藏了，那是不是父亲被盖住的就显示出来了。

2019-04-27 18:09:41
啸聚山林 #3

没明白哪里超出了

2019-06-01 17:15:16

点开查看后面1条评论

士林健津_007 2019-04-26 20:38:37

我也想问这个问题

好帮手慕柯南 #1

同学老师已经在问答下回复，同学记得去看哦~祝学习愉快

2019-04-27 09:59:27
士林健津_007 回复好帮手慕柯南 #2

看到了，谢谢老师

2019-04-27 11:02:04
士林健津_007 回复好帮手慕柯南 #3

老师，我仔细思考了下，有些地方不明白，page-nav的width:1200px 和上面的正文部分一样的宽度，page-nav ul 的width:500px 怎么会导致page-nav的内容超出page-nav 的范围？请老师释疑。

2019-04-27 11:14:33

点开查看后面2条评论

相似问题

为什么添加overflow:hidden;边框就会出来呢？

为什么这样写图片不会从边框开始显示？

为什么溢出效果设置为隐藏后才可以看到边框

overflow: hidden;解决外边距塌陷

请问如何添加边框？

登录后可查看更多问答，登录/注册

2. 从网页搭建入门JavaWeb

参与学习人
提交作业 676 份
解答问题 9666 个

本阶段将从前端网页搭建入手，到Java Web基础，前后端结合助你完成Java Web小白的蜕变！

本课精华内容

问答作业

4-3个人程序源码，提供给各位参考！

63 1

2-4 编程练习

22 1

text-align和direction有什么区别

13 1

交作业交作业交作业

225 2

是不是只有在JS语言中局部变量的定义才可以放在else语句中

24 1

查看更多本课问答

请稍等 ...

意见反馈帮助中心 APP下载