CSS中为什么overflow:hidden能清楚浮动float的影响

父块没有设置指定的高宽,当子块设置为浮动后,原本包裹子块的父块的高度塌陷消失,这时给父块设置overflow:hidden就能清楚浮动造成的影响,使父块重新包裹子块。

但这个有个本质问题,当父块高度塌陷消失,这时给父块设置overflow:hidden,按照这个属性的本意,本应该是切掉超出父块的内容,也就是应该将父块之外的浮动的子块切除隐藏。

但为什么,这时没有切除隐藏超出边界的子块,反而恰恰让父块重新有了高度包裹子块,这难道不是和overflow:hidden的本意相背离了吗?

为什么效果里是没有切除隐藏,反而是重新让父块生成高度包裹子块以达到清楚浮动的影响。

请哪位高手能否从本质和根源上分析在这个效果里overflow:hidden背离其属性本意的问题,从本质和根源上分析为什么overflow:hidden背离其本意没有切除隐藏反而产生了清楚浮动的影响。

求高手赐教。

一、有overflow:hidden
对于overflow:hidden的功能就是说超出部分不显示,达到一个效果“让子元素只在父元素内显示”
(1、是剪掉外面的 2、撑开显示)对应下面两种情况。
有两种情况:
1、有宽度高度值(是剪掉外面的 ):这样会剪切掉父元素外的子元素,达到“让子元素只在父元素内显示”的效果。(这才是overflow:hidden的正确用法)

2、无宽度高度值(撑开显示),这样就没有固定边界让它无法识别那是为那是内,但是还是要达到“让子元素只在父元素内显示”的效果,这样寻找边界以达到这种效果,我们不难发现在最大显示子元素(也就是子元素的边上时)刚好能达到“让子元素只在父元素内显示”的效果。即使有了 ”float:left;“ 浮动分离了父子元素,分离是分离但是还是父子啊(就像断绝父子关系,但是血浓于水,生理上有遗传),只要是父子也能满足这句话达到“让子元素只在父元素内显示”的效果。(这个是技巧)

二、无overflow:hidden
也有两种
1、有宽度高度值,显示为溢出

2、无宽度高度值,就会被撑开(因为没有分离父子),加了”float:left;“ 浮动分离了父子元素,而且又没有overflow:hidden强制达到“让子元素只在父元素内显示”的效果,所以不撑开,反而父块的高度塌陷消失

不是高手初学者...望指正

hight因为固定了高度撑不开 用min-hight就没问题了

而且ie6中无法识别min-hight,且把hight当成min-hight所以说ie6的高度只能设定最小高度,所以ie6不用overflow:hidden就能撑开
温馨提示:内容为网友见解,仅供参考
第1个回答  2019-03-27
我的理解是overflow想要清除溢出的内容起码你得给个边界吧,从楼主的例子也可以看出如果写overflow的容器没有高度那它就会取子元素的高度(如果没有高度也要强行隐藏那不就什么都没得了)。至于清除浮动的效果..我也只是个初心者并不是大佬恕我无法解答了。
第2个回答  推荐于2017-11-25
overflow:hidden要有宽度或者高度才会溢出部分隐藏,如果外部盒子没有宽度或者高度,里面又是浮动元素,就会被撑开。
看看这个不知道你能不能理解追问

这篇文章我看过,他是在结果成立的基础上来用证据来证明结果,他说“将父块div的高度值删除后,父块高度自动被子块高度值给撑开了。说到这里,我们再来理解一下“浮动”这个词的含义……”,他讲都没讲明白就转换到其他概念上了,在一个个已经成立的结果上推演。为什么没有指定高宽时它就撑开父块,我想知道的是为什么会产生这个结果,而不是产生另外的结果,需要这个结果的本源,由前往后推理,而不是在结果上来推理证明结果。

追答

我觉得他说的还比较清楚了啊,他说要理解“浮动”,没有转换到其他概念啊,因为盒子里面的元素是浮动元素的时候,盒子用overflow:hidden就有清除浮动的效果,等于是浮动的元素和盒子又在一个层上了,父元素又没有指定高度,所以就会根据子元素撑开了父元素的高度,而不是溢出隐藏切掉多出来的部分嘛。
他不是说了“......这就是overflow:hidden这个属性清除浮动的准确含义。”

参考资料:http://www.chinaz.com/design/2008/0818/35473.shtml

本回答被提问者和网友采纳
第3个回答  2015-12-11

  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的高度的时候,超出的部分就会被隐藏。这就是隐藏溢出的含义!

第4个回答  2012-10-25
这个是溢出隐藏的意思,父块要设置宽度。

CSS中为什么overflow:hidden能清楚浮动float的影响
1、有宽度高度值(是剪掉外面的 ):这样会剪切掉父元素外的子元素,达到“让子元素只在父元素内显示”的效果。(这才是overflow:hidden的正确用法)2、无宽度高度值(撑开显示),这样就没有固定边界让它无法识别那是为那是内,但是还是要达到“让子元素只在父元素内显示”的效果,这样寻找边界以达...

overflow hidden的原理是什么
overflow:hidden的核心机制是通过创建BFC(块级格式化上下文)和管理边距折叠来实现布局控制。BFC的作用类似于一个隔离的区域,当一个元素设置为overflow:hidden时,其内部的布局规则独立于文档的其余部分。这使得浮动元素不再影响其容器的高度计算,即使有浮动元素,容器也能自动包含其高度,无需额外的清除浮...

overflo用
CSS中的"overflow:hidden"功能关键在于隐藏元素内容超出的部分,它在实际应用中有两方面的作用。首先,当子元素内容高度超过父元素时,隐藏溢出的那部分,确保布局整洁。其次,它能清除浮动,与clear:both类似,有助于维护元素间的正常布局。CSS,全称层叠样式表,以其特性著称。一方面,它提供了丰富的样式...

overflow:hidden作用是什么?
CSS中overflow:hidden的作用是当元素内的内容溢出的时候使它隐藏溢出的部分,即超出部分隐藏,具体应用如下:一、隐藏溢出的部分。比如一个父块级元素里面包含了子块级元素,当子块级元素的高度超过父块级元素的高时,超部分就会隐藏。二、清除浮动。它的功能和clear:both是一个作用,父元素中加了overflo...

overflow:hidden
CSS中的overflow:hidden属性在元素内容溢出时起到隐藏多余部分的作用,其主要应用包括隐藏溢出部分和清除浮动。当一个父元素包含一个子元素,子元素高度超过父元素时,超出部分会被隐藏。此外,overflow:hidden与clear:both有相似功能,能够清除父元素中浮动子元素的影响。CSS提供了丰富的样式定义能力,如设置...

css问题:overflow:hidden;在这里起什么作用?是清除滚动条?还是将背景...
,这种效果是针对整个屏幕的内容制作的,你可以在body元素当中添加一些div元素,书写一些内容,让div元素内容的高度超出一个浏览器窗口的大小,就能看出效果了。此外,你可以检查一下该元素的子元素 如果该元素的子元素存在浮动元素,则也有清除浮动的作用 这种设置,通常做的是“单屏幕页面”网页。

前端编程 css 我想知道在这里overflow的作用是什么
第一个作用是防止内部元素超出 我们假设我们有一个大盒子,但是盒子里装了很多东西都超过盒子能盛放的大小了,如果添加overflow:hidden后就会扔掉超出部分的内容,示例图如下(我自己画的凑合着看吧)第二个作用就是清除浮动,假设我们给我们盒子里的内容浮动了,还是上面我们那个盒子里面的东西都飘起来了,...

overflow:hidden什么意思
float)时,容器的高度可能无法正确计算,导致内容溢出容器。通过给容器设置“overflow:hidden”,可以清除浮动造成的布局问题,使容器正确地包裹浮动元素。防止文字溢出:当容器中的文字内容过长,无法完全显示在容器内时,可以使用“overflow:hidden”来截断文字,避免出现文字溢出的情况。

给我详细讲解一下overflow:hidden的用法?
overflow:hidden这个CSS样式是大家常用到的CSS样式。一提到清除浮动,我们就会想到另外一个CSS样式:clear:both。下面详细的阐述一下“浮动”的含义。这是常用的div写法,下面我们来书写样式。大家可以在DMX中自己做试验#box{ :500px; background:#000; height:500px; }#content { float:left; width:600...

CSS 清除浮动问题
overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解。一提到清除浮动,我们就会想到另外一个CSS样式:clear:both,我相信对于这个属性的理解大家都不成问题的。但是对于“浮动”这个词到底包含什么样的含义呢?我们下面来详细...

相似回答