一、有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就能撑开
我的理解是overflow想要清除溢出的内容起码你得给个边界吧,从楼主的例子也可以看出如果写overflow的容器没有高度那它就会取子元素的高度(如果没有高度也要强行隐藏那不就什么都没得了)。至于清除浮动的效果..我也只是个初心者并不是大佬恕我无法解答了。
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来说,都是不起作用的。
当我们全面的理解了浮动这个词的含义的时候,我们就理解overflow:hidden这个
属性中的解释,清除浮动是什么意思了。也就是说,当我们给box这个div加上overflow:hidden这个属性的时候,其中的content
等等带浮动属性的div的在这个立体的浮动已经被清除了。
这就是overflow:hidden这个属性清除浮动的准确含义。当我们没有给box这个
div设置高度的时候,content
这个div的高度,就会撑开box这个div,而在另一个方面,我们要注意到的是,当我们给box这个div加上一个高度值,那么无论content
这个div的高度是多少,box这个高度都是我们设定的值。而当content
的高度超过box的高度的时候,超出的部分就会被隐藏。这就是隐藏溢出的含义!
这个是溢出隐藏的意思,父块要设置宽度。