关于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;和定位属性，则以父类的优先级最高，以此类推。

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

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

分享名称：关于overflow元素，hidden属性“隐藏失效”问题的探究-创新互联
标题网址：http://cdiso.cn/article/cschih.html