作业帮给我详细讲解一下overflow:hidden的用法?hidden是隐藏,到底怎么隐藏呢?是超出的部分被剪裁掉了?被谁裁掉了呢?什么情况下会用到overflow：hidden啊?求大神给我讲讲,有图示最好!感激不尽!之前写过
来源：学生作业帮助网 编辑：作业帮 时间：2024/11/17 12:48:37
给我详细讲解一下overflow:hidden的用法?hidden是隐藏,到底怎么隐藏呢?是超出的部分被剪裁掉了?被谁裁掉了呢?什么情况下会用到overflow：hidden啊?求大神给我讲讲,有图示最好!感激不尽!之前写过
给我详细讲解一下overflow:hidden的用法?
hidden是隐藏,到底怎么隐藏呢?是超出的部分被剪裁掉了?被谁裁掉了呢?什么情况下会用到overflow：hidden啊?求大神给我讲讲,有图示最好!感激不尽!
之前写过一个div,本来是图一的结构,后来加了overflow：hidden之后就变成图二那样了,这是问什么呢?而且《p》里面的内容并没有少,而是自动重新排列了……头像是float：left的.
给我详细讲解一下overflow:hidden的用法?hidden是隐藏,到底怎么隐藏呢?是超出的部分被剪裁掉了?被谁裁掉了呢?什么情况下会用到overflow：hidden啊?求大神给我讲讲,有图示最好!感激不尽!之前写过
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来说,都是不起作用的.
打个形象的比喻就是当JJ脱离BB的时候,JJ的大小对于BB是没有撑开的作用的（有点少儿不宜的感觉-_-|||） OK,当我们全面的理解了浮动这个词的含义的时候,我们就理解overflow:hidden这个属性中的解释,清除浮动是什么意思了.也就是说,当我们给box这个div加上overflow:hidden这个属性的时候,其中的content 等等带浮动属性的div的在这个立体的浮动已经被清除了,就好比JJ又进入了BB内,JJ的大小自然又会影响到BB的大小.这就是overflow:hidden这个属性清除浮动的准确含义.
当我们没有给box这个div设置高度的时候,content 这个div的高度,就会撑开box这个div,而在另一个方面,我们要注意到的是,当我们给box这个div加上一个高度值,那么无论content 这个div的高度是多少,box这个高度都是我们设定的值.而当content 的高度超过box的高度的时候,超出的部分就会被隐藏.这就是隐藏溢出的含义!
火狐里面解释的就是这个意思（float的属性就是立体漂浮,IE7和火狐都是这个意思了,IE6是不管外面的层的属性content 会直接撑开box的）,所以才在 height的auto属性中加入!important这个值!让他在IE7中优先执行这个命令儿忽略overflow：hidden;这个命令!