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)

熱門話題

gmail信箱登陸入口在哪裡

7814

Java教學

1646

CakePHP 教程

1402

Laravel 教程

1300

PHP教程

1236

Related knowledge

HTML容易為初學者學習嗎？ Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML中起始標籤的示例是什麼？ Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。