overflow:hidden 的问题高分请教！_html/css_WEB-ITnose
- WBOY原创
- 2016-06-24 12:09:071076浏览
没加over:hidden是这样的效果:
<div style="background:blue;"> <div style="width:100px; height:100px; background:red; float:left;"></div> </div>
加了over:hidden是这样的效果 （在IE8、9下，仍然无法显示父div）：
<div style="background:blue; overflow:hidden"> <div style="width:100px; height:100px; background:red; float:left;"></div> </div>
再加上height:1%，IE下就可以显示父元素了
<div style="background:blue; overflow:hidden height:1%"> <div style="width:100px; height:100px; background:red; float:left;"></div> </div>
问题：
1、为什么加了overflow:hidden，父元素的DIV就可以不受子元素浮动的影响，正常显示了？这是什么原理呢？
2、第三段代码，height:1%。此时父DIV的父元素应该是body，而当前body高度应该是0吧（因为子div浮动了）？那height:1%不等同于height:0;吗？
即便不是0，也应该是一个定值啊，那为什么这里的父div还能自适应高度呢？
请大家别回复应该这么做或应该那么做，别的方法我知道，但我现在就是对上面这两个问题比较疑惑。
麻烦大家仔细读下我的问题，谢谢了！:)
回复讨论(解决方案)
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
加了over:hidden是这样的效果（在IE8、9下，仍然无法显示父div）：……
http://www.chinaz.com/design/2008/0818/35473.shtml参考这个
引用楼主 wsy87217 的回复:
没加over:hidden是这样的效果:
HTML code
加了over:hidden是这样的效果（……
嗯我好像明白了！
第2个问题能帮我看下吗？
1，overflow:hidden;是让子元素不溢出，而本身的div没有设置height属性,这样一来标准浏览器就去检测子元素的高。
2，height：1%是用来触发元素hasLayout，类似的可以用zoom:1替代；
引用 4 楼 wangyao1135 的回复:
引用楼主 wsy87217 的回复:
没加over:hidden是这样的效果:
HTML code
……
我没有设置body的高度，你看看效果。body的高度是0吗？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">body{ background:#FF0000;}</style></head><body></body></html> 1，overflow:hidden;是让子元素不溢出，而本身的div没有设置height属性,这样一来标准浏览器就去检测子元素的高。
2，height：1%是用来触发元素hasLayout，类似的可以用zoom:1替代；
额。。。没太看明白~
引用 5 楼 wsy87217 的回复:
引用 4 楼 wangyao1135 的回复:
引用楼主 wsy87217 的回复:
没加over:hidden是这样的效果:
HTML code
我用fire bug看的，是0。。。
那浏览器显示的效果，说明了什么问题呢。。。。
浏览器的显示效果应该能说明body不是没有高度的吧。默认的应该是和浏览器打开的一样大的。应该是宽是100%高度也是
1，浮动float 是指示一个元素忽略自己和同级的块(block)属性，尽可能紧凑地利用空间；
overflow是指示一个元素，如何占有自己的block空间；
如果父元素没有定义overflow,游览器会只有一次布局呈现，把子元素显示完了就完了。如果父元素有overflow,游览器在把子元素呈现完后会再回溯一次，重新计算空间，计算并调整父元素的显示范围。然后才继续下面的元素布局。
2，流式布局的内的元素高度百分比是无效的，百分比只有在明确指定了高度的盒式模型内才有效。在流式布局内，高度百分比会直接被忽略。
3，以上其实为本人猜测，没有深入浏览器内部，也没有见到正式的官方解释。
谢谢大家！
稍微明白点了！：）