overflow:hidden 的问题高分请教！_html/css_WEB-ITnose-html教程-PHP中文网

回复讨论(解决方案)

首页

web前端

html教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:09 PM

没加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，以上其实为本人猜测，没有深入浏览器内部，也没有见到正式的官方解释。

谢谢大家！
稍微明白点了！：）

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

Java教程

1677

CakePHP 教程

1430

Laravel 教程

1333

PHP教程

1278

C# 教程

1257

显示更多

Related knowledge

HTML：结构，CSS：样式，JavaScript：行为 Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML，CSS和JavaScript的未来：网络开发趋势 Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。

HTML的未来：网络设计的发展和趋势 Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript：比较概述 Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。