overflow:hidden 的问题高分请教！_html/css_WEB-ITnose

没加over:hidden是这样的效果:

LobeHub

LobeChat brings you the best user experience of ChatGPT, OLLaMA, Gemini, Claude

下载

回复讨论(解决方案)

overflow;hidden清除浮动就是指子div从飘在空中的状态落下来了，如果父div高度不够，那么就要被影响，你试着从三维的空间去想想，没看明白的话我在你的那个帖子里写了一些。。。

一下内容为网上搜索得到的答案：
overflow:hidden 这个 CSS 样式是大家常用到的 CSS 样式，但是大多数人对这个样式的理解 仅仅局限于隐藏溢出，而对于清除浮动这个含义不是很了解。一提到清除浮动，我们就会想 到另外一个 CSS 样式：clear:both，我相信对于这个属性的理解大家都不成问题的。但是对 于“浮动”这个词到底包含什么样的含义呢？我们下面来详细的阐述一下。 这是一个常用的 div 写法，下面我们来书写样式。大家可以在 DMX 中自己做试验 
#box{ width:500px; background:#000; height:500px; } 
#content { float:left; width:600px; height:600px; background:red; } 
给 box 这个 div 加了一个 overflow:hidden 这个属性解决了这个问题。我们直到 overflow:hidden 这个属性的作用是隐藏溢出，给 box 加上这个属性后，我们的 content 的宽 高自动的被隐藏掉了。另外，我们再做一个试验，将 box 这个 div 的高度值删除后，我们发 现，box 的高度自动的被 content 这个 div 的高度值给撑开了。说到这里，我们再来理解一 下“浮动”这个词的含义。我们原先的理解是，在一个平面上的浮动，但是通过这个试验， 我们发现，这不仅仅是一个平面上的浮动，而是一个立体的浮动！也就是说，当 content 这 个 div 加上浮动这个属性的时候，在显示器的侧面，它已经脱离了 box 这个 div，也就是说， 此时的 content 的宽高是多少，对于已经脱离了的 box 来说，都是不起作用的。当我们全面 的理解了浮动这个词的含义的时候，我们就理解 overflow:hidden 这个属性中的解释，清除 浮动是什么意思了。 也就是说， 当我们给 box 这个 div 加上 overflow:hidden 这个属性的时候， 其 中 的 content 等 等 带浮 动 属 性 的 div 的 在 这 个 立 体 的 浮 动 已 经 被 清除 了 。 这 就 是 overflow:hidden 这个属性清除浮动的准确含义。 当我们没有给 box 这个 div 设置高度的时候， content 这个 div 的高度，就会撑开 box 这个 div，而在另一个方面，我们要注意到的是，当  我们给 box 这个 div 加上一个高度值， 那么无论 content 这个 div 的高度是多少， box 这个高 度都是我们设定的值。 而当 content 的高度超过 box 的高度的时候， 超出的部分就会被隐藏。 这就是隐藏溢出的含义！ 

overflow;hidden清除浮动就是指子div从飘在空中的状态落下来了，如果父div高度不够，那么就要被影响，你试着从三维的空间去想想，没看明白的话我在你的那个帖子里写了一些。。。
我看到了，但是还是没太理解~而且div默认height不是100%吧？height如果是百分比，就是只相对于父元素的，div里如果没内容那height就应该是0~

没加over:hidden是这样的效果:
HTML code

引用楼主 wsy87217 的回复:
没加over:hidden是这样的效果:
HTML code

1，overflow:hidden;是让子元素不溢出，而本身的div没有设置height属性,这样一来标准浏览器就去检测子元素的高。
2，height：1%是用来触发元素hasLayout，类似的可以用zoom:1替代；

引用 4 楼 wangyao1135 的回复:

引用楼主 wsy87217 的回复:
没加over:hidden是这样的效果:
HTML code

1，overflow:hidden;是让子元素不溢出，而本身的div没有设置height属性,这样一来标准浏览器就去检测子元素的高。
2，height：1%是用来触发元素hasLayout，类似的可以用zoom:1替代；
额。。。没太看明白~

引用 5 楼 wsy87217 的回复:

引用 4 楼 wangyao1135 的回复:

引用楼主 wsy87217 的回复:
没加over:hidden是这样的效果:
HTML code