关于overflow元素，hidden属性“隐藏失效”问题的探究

1.overflow元素属性的简单介绍。
正如w3c介绍的那样……overflow总共有五个属性。
overflow:visible;默认值，如果内容超出，则会呈现在盒子之外。
overflow:scroll;超出的内容会以滚动条的形式显示。
overflow:auto;自适应，如果内容超出，自动以滚动条显示方便查看。
overflow:inherit;继承父类overflow属性。
overflow:hidden;超出的部分隐藏且不可见。
此次主要探讨overflow:hidden;属性。
2.overflow:hidden;的一般应用。
（1）下面通过一个简单的例子对overflow：hidden；属性的作用进行说明。

创新互联建站自成立以来，一直致力于为企业提供从网站策划、网站设计、网站设计、成都网站制作、电子商务、网站推广、网站优化到为企业提供个性化软件开发等基于互联网的全面整合营销服务。公司拥有丰富的网站建设和互联网应用系统开发管理经验、成熟的应用系统解决方案、优秀的网站开发工程师团队及专业的网站设计师团队。

    由效果图很明显可以看出，绿色子类超出了红色父类300px。
    （2）这时我们给红色父类设置overflow：hidden；属性。效果如下：
    

（效果图）：

可以从图中看出，绿色子类超出的300px被隐藏了
（3）下面我们将红色父类的高度设置为auto。

（效果图）如下：

很明显，红色父类的高度在设置overflow：hidden;和auto组合属性之后被子类的高度撑开。
这就是overflow：hidden；属性在实际应用中最基础的使用。
这时候你自然心里会嘀咕，逼逼半天，这谁不知到？别担心，这只是热身。
3.overflow:hidden;“隐藏”失效。
（1）我们给父类外层再增加一个黑色父类，再给黑色祖父类相对定位，子类绝对定位。来，我们看效果。











（效果图）如下：

看到效果图是不是感觉和你预想的大相径庭呢？怎么会这样？到底什么原因？是什么导致它“隐藏”失效呢？
还记得代码怎么写的吗？我们给黑色祖父类相对定位，父类并没有定位只是设置了overflow：hidden；属性，但给子类设置了绝对定位让子类脱离了父类的束缚，脱离了文本流。原本我们预想的是绿色子类超出部分被红色父类隐藏，可事实是它并没有，而且超出了祖父类。
（2）下面我们通过给祖父类设置overflow：hidden；来探究下。

（效果图）如下：

我们看到调皮的绿色子类属性在祖父类设置相对定位和overflow：hidden；属性之后终于隐藏了，但我们发现，它只不过是相对于相对定位的黑色祖父类隐藏了超出部分，但父类的超出部分隐藏的元素属性它并没有实现，可见它并不是一个很听话的孩子。
怎么办呢？孩子不听话怎么办？很简单，打一顿就好了。
（3）我们再给父类也设置相对定位属性看一看。

（效果图）如下;

哈哈哈……看到没有，调皮的绿色子类终于在红色父类设置相对定位之后终于听话了，它隐藏了自己超出去的小尾巴。
好了。下面我们总结一下。
在子类，父类，祖父类，祖祖父类等都没有定位（即默认浏览器定位），父类设置overflow：hidden；属性生效，即子类超出部分会被隐藏。
但只要子类绝对定位，想要子类生效overflow:hidden;属性，那相应设置overflow:hidden;属性的父类必须定位（即除了了浏览器默认定位）之后才会生效，否则隐藏失效。如果父类和祖父类都设置了overflow:hidden;和定位属性，则以父类的优先级最高，以此类推。

        今天就先说到这里，欢迎补充！(还不懂的小伙伴可以复制代码试验哦！)

文章名称：关于overflow元素，hidden属性“隐藏失效”问题的探究
本文地址：http://cqcxhl.com/article/ppdspp.html