overflow:hidden属性
Posted uncleyong
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了overflow:hidden属性相关的知识，希望对你有一定的参考价值。
overflow:hidden这个CSS样式是大家常用到的CSS样式，但是大多数人对这个样式的理解仅仅局限于隐藏溢出，而对于清除浮动这个含义不是很了解。
一提到清除浮动，我们就会想到另外一个CSS样式：clear:both，我相信对于这个属性的理解大家都不成问题的。但是对于“浮动”这个词到底包含什么样的含义呢？我们下面来详细的阐述一下。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } #wai{width:100px; height:100px; background:black;} #nei{float:left; width:150px; height:150px; background:red;} </style> </head> <body> <div id="wai"> <div id="nei"></div> </div> </body> </html>
可以看到，我给nei这个id加了一个浮动，我们常规的理解是，我们允许nei这个id的div的右边出现其他的内容，只要它的宽度不超过wai这个div和nei这个div的剩余值。
如果div wai中还包含其他的div，我不允许它出现在nei的右侧，我们则用样式clear:both指定这个div，不允许它浮动在nei右侧。
这些在ie6里面是正确的。但是在火狐或者其他浏览器里面，我们发现问题并非如此简单。我们发现，当nei这个div的宽度和高度都大于wai这个div的时候，wai并没有被内撑开而是依旧显示为我们指定的宽高。
这个时候我不理解了，我搜索了很多的资料，但是都没能理解这是为什么，直到看到别人在类似的情况下给wai这个div加了一个overflow:hidden这个属性解决了这个问题。
我们直到overflow:hidden这个属性的作用是隐藏溢出，给wai加上这个属性后，我们的nei的宽高自动的被隐藏掉了。
#wai{width:100px; height:100px; background:black;overflow:hidden}
另外，我们再做一个试验，将wai这个div的高度值删除后，我们发现，wai的高度自动的被nei这个div的高度值给撑开了。
说到这里，我们再来理解一下“浮动”这个词的含义。我们原先的理解是，在一个平面上的浮动，但是通过这个试验，我们发现，这不仅仅是一个平面上的浮动，而是一个立体的浮动！
也就是说，当nei这个div加上浮动这个属性的时候，在显示器的侧面，它已经脱离了wai这个div，也就是说，此时的nei的宽高是多少，对于已经脱离了的wai来说，都是不起作用的。打个形象的比喻就是当JJ脱离BB的时候，JJ的大小对于BB是没有撑开的作用的（有点少儿不宜的感觉-_-|||）
OK，当我们全面的理解了浮动这个词的含义的时候，我们就理解overflow:hidden这个属性中的解释，清除浮动是什么意思了。也就是说，当我们给wai这个div加上overflow:hidden这个属性的时候，其中的nei等等带浮动属性的div的在这个立体的浮动已经被清除了，就好比JJ又进入了BB内，JJ的大小自然又会影响到BB的大小。
这就是overflow:hidden这个属性清除浮动的准确含义。
当我们没有给wai这个div设置高度的时候，nei这个div的高度，就会撑开wai这个div，而在另一个方面，我们要注意到的是，当我们给wai这个div加上一个高度值，那么无论nei这个div的高度是多少，wai这个高度都是我们设定的值。而当nei的高度超过wai的高度的时候，超出的部分就会被隐藏。这就是隐藏溢出的含义！
我相信，通过我的这些文字，大家对overflow:hidden这个属性有了全新的认识。希望大家和我一样，在div+css学习中能够不断的进步！
overflow:hidden同样会隐藏position:absolute的子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父元素中有overflow:hidden, 子元素absolute不能显示</title>
<style>
*{
padding: 0;
margin: 0;
}
.parent{
height:40px;
width:200px;
border:solid 1px black;
position:relative;
}
.sub{
position:absolute;
top:10px;
left:10px;
height:100px;
width:100px;
background-color:red
}
.overHidden{
overflow:hidden; /* 同样会隐藏position:absolute的子元素 */
}
</style>
</head>
<body>
这个是有overflow:hidden
<div class="parent overHidden">
<div class="sub"></div>
</div>
这个没有
<div class="parent">
<div class="sub"></div>
</div>
</body>
</html>
效果如下：
这种情况通常会出现在我们在做一些具有弹出或下拉的控件时，所以还是把弹出层直接放到body中比较可靠。
以上是关于overflow:hidden属性的主要内容，如果未能解决你的问题，请参考以下文章
inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移
html css overflow设置hidden，会隐藏一些内容么？
对同一元素设置overflow-x:hidden,overflow-y:visible;属性值不生效