overflow:hidden 的问题高分请教！_html/css_WEB-ITnose-HTML 튜토리얼-php.cn

回复讨论(解决方案)

집

웹 프론트엔드

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 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7773

자바 튜토리얼

1644

Cakephp 튜토리얼

1399

라라벨 튜토리얼

1296

PHP 튜토리얼

1234

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

WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.

HTML의 시작 태그의 예는 무엇입니까? Apr 06, 2025 am 12:04 AM

anexampleStartingtaginhtmlis, whithbeginsaparagraph.startingtagsareessentialinhtmlastheyinitiate rements, definetheirtypes, andarecrucialforstructurituringwebpages 및 smanstlingthedom.