CSS中:overflow:hidden的作用

功能1、隐藏溢出
 

在IE6下,当子容器的宽高超出父容器时,父容器就会被撑开来。

要想解决这个问题,在父容器中除定义宽和高的值以外,还必须写overflow:hidden,这样就能把子容器的其它内容隐藏。

但是在火狐或者其他浏览器里面,我们发现问题并非如此简单。我们发现,当子容器这个div的宽度和高度都大于父容器这个div的时候,父容器并没有被内撑开而是依旧显示为我们指定的宽高。

例如:结构如下:

css代码:

#wai{ width:200px;  background:#000; height:200px; border:2px blue solid; }

#nei { float:left; width:300px; height:300px; background:red;}

在IE6中显示如下图:

wai层div被nei层div撑开。

在IE7、IE8、FF中显示如下图:

wai并没有被nei撑开而是依旧显示为我们指定的宽高。

但是如果我们在#wai中加上overflow:hidden; 显示就会变化了,nei的宽高自动的被隐藏掉了。

总之,当我们没有给wai这个div设置高度的时候,nei这个div的高度,就会撑开wai这个div,而在另一个方面,我们要注意到的是,当我们 给wai这个div加上一个高度值,那么无论nei这个div的高度是多少,wai这个高度都是我们设定的值。而当nei的高度超过wai的高度的时候, 超出的部分就会被隐藏。这就是隐藏溢出的含义!
 

功能2、消除浮动
 

当nei这个div加上浮动这个属性的时候,在显示器的侧面,它已经脱离了wai这个div,也就是说,此时的nei的宽高是多少, 对于已经脱离了的wai来说,都是不起作用的。当我们全面的理解了浮动这个词的含义的时候,我们就理解overflow:hidden这个属性中的解释,清除浮动是什么意思了。也就是说,当我们给wai这个div加上overflow:hidden这个属性的时候,其中的nei等等带浮动属性的div的在这个立体的浮动已经被清除了。

 

时间: 2024-10-13 07:30:12

CSS中:overflow:hidden的作用的相关文章

转:css中overflow:hidden 不起作用了吗?

css中overflow:hidden 不起作用了吗? 有同学遇到这样的问题,现象是给元素设置了overflow:hidden,但超出容器的部分并没有被隐藏,难道是设置的hidden失效了吗?其实看似不合理的现象背后都会有其合理的解释. 我们知道,overflow属性值有这几种:visible:声明内容不会被剪裁.比如内容可能被渲染到容器外面.hidden:声明内容将被剪裁,并且也甭想使用滚动条来查看剪裁掉的内容.scroll:声明内容将被剪裁,但有可能出现滚动条来查看被剪裁掉的内容.滚动条出现

CSS中overflow:hidden

CSS中,overfllow:hidden的作用是隐藏溢出 比如:<div style="width:300px;overflow:hidden" id=1><div id=2></div><div> 当ID=2的这个DIV高度设定的宽度超过了300px,那么超出的部分将自动被隐藏. ?

CSS中overflow:hidden在ie6、ie7无效不能隐藏解决办法

在我们做前端时会碰到一个固定的宽度当文字超过我们这个固定宽度时我们不换行的同时希望文字隐藏了, 那我们通常会使用overflow:hidden来隐藏文字,但是发现在ie6,ie7下overflow:hidden无效了,那么如何解决这个问题呢? 这就是ie6.ie7 的bug. 解决方法: 当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时,父元素的overflow:hidden属性就会失效.我们在IE 6 7内发现子元素会超出父元素设定的高度,即使父元素设置了o

CSS中zoom:1的作用 ,小标签大作用

CSS中zoom:1的作用兼容IE6.IE7.IE8浏览器,经常会遇到一些问题,可以使用zoom:1来解决,有如下作用:触发IE浏览器的haslayout解决ie下的浮动,margin重叠等一些问题.比如,本站使用DIV做一行两列显示,HTML代码: <div class="h_mainbox"> <h2>推荐文章</h2> <ul class="mainlist"> <li><a href=&quo

(转载)CSS中zoom:1的作用

CSS中zoom:1的作用兼容IE6.IE7.IE8浏览器,经常会遇到一些问题,可以使用zoom:1来解决,有如下作用:触发IE浏览器的haslayout解决ie下的浮动,margin重叠等一些问题.HTML代码: 1 <div class="h_mainbox"> 2 <h2>推荐文章</h2> 3 <ul class="mainlist"> 4 <li><a href="#"

css中的zoom的作用

CSS中zoom:1的作用 兼容IE6.IE7.IE8浏览器,经常会遇到一些问题,可以使用zoom:1来解决,有如下作用: 触发IE浏览器的haslayout 解决ie下的浮动,margin重叠等一些问题. 比如,本站使用DIV做一行两列显示, HTML代码: 复制代码 代码如下: <div class="h_mainbox"> <h2>推荐文章</h2> <ul class="mainlist"> <li>

CSS中zoom:1的作用

其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持.它可以设置或检索对象的缩放比例.除此之外,它还有其他一些小作用,比如触发ie的hasLayout属性,清除浮动.清除margin的重叠等. Zoom的使用方法: zoom : normal | number normal : 默认值.使用对象的实际尺寸 number : 百分数 | 无符号浮点实数.浮点实数值为1.0或百分数为100%时相当于此属性的 normal 值用白话讲解就是zoom:后面的数字即放大的倍数,可以是数值,

CSS中zoom属性的作用

这里介绍一下CSS中的Zoom属性,这个属性一般不为人知,甚至有些CSS手册中都查询不到.但经常会在一些css样式中看到它出现. Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持.它可以设置或检索对象的缩放比例.除此之外,它还有其他一些小作用,比如触发ie的hasLayout属性,清除浮动.清除margin的重叠等. zoom版本:IE5.5+专有属性 继承性:无 语法: zoom : normal | number 参数: normal :  使用对象的实际尺寸number :

css ie7中overflow:hidden失效问题及解决方法

css兼容ie7: 做页面的时候用负边距居中的时候在IE7下面,父节点中的overflow:hiden失效的问题,查阅了一些资料,总结一下解决方法. 问题原因: 当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时,父元素的overflow:hidden属性就会失效. 解决方法: 我们在IE7内发现子元素会超出父元素设定的高度,即使父元素设置了overflow:hidden. 解决这个bug很简单,在父元素中使用position:relative;即可解决该bug