1个通俗化小故事告知你外溢掩藏（overflow:hidden）

实际上看似不符合理的状况身后都会有其有效的解释。

大家了解，overflow特性值有这几种：

W3C规范中指明：
一般1个盒子的內容是被限定在盒子界限以内的。但有时也会造成外溢，即一部分或所有內容跑到盒子界限以外。外溢将在考虑以下标准之1时出現：

当外溢产生时，overflow特性承诺了器皿盒子是不是裁剪掉超过其内界限的一部分，而且决策是不是出現翻转条来浏览被裁剪掉的內容。它会危害到元素全部內容的裁剪，但有个列外状况，即上面第6条所提到的：元素的子孙后代元素的包括块（Containing blocks）是全部视窗（viewport）或是该元素的先祖元素，內容将不容易被裁剪。包括块是甚么呢？简易的说，便是能够决策1个元素部位和尺寸的块。一般1个元素的包括块由离它近期的块级先祖元素的內容界限决策。但当元素被设定成肯定精准定位时，包括块由近期的position并不是static的先祖元素决策。

看起来有点绕，让大家来听个简易的故事吧。

html片断:

style:

上面的编码讲述的是这样1个故事：蓝色的海洋里有块鲜红色的大地，鲜红色大地内有个黄色的段子。因为段子款式的设定，它的一部分內容超过了鲜红色大地。为防止黄色段子污染到蓝色海洋，鲜红色大地警醒的为自身设定了overflow:hidden;这样超过大地的黄色一部分就被剪掉了，大家看到的将是这样1派和睦景色，如图1：

图1：和睦的星球

假如事情全是这样有理井然有序，天地可不就安宁了。不久，黄色段子感觉凭自身的赫赫有名身份不应该受鲜红色大地的操纵，因而煞费苦心将自身变改为了肯定精准定位，1下子就解决了大地的拘束，如图2：

图2：猖狂的段子

为何会这样呢？这就是造就了上面提到过的第6个标准。当黄色段子变为position:absolute时，它的包括块已由原先的鲜红色大地的內容界限升級到了离它近期的position并不是static的蓝色海洋了。而海洋此时对此还1没有知呢，本身沒有设定overflow:hidden特性，致使黄色段子本该被剪裁的一部分所有可见，不但污染到海洋，还危害到全部星球，状况万分十万火急啊。即便这时候海洋设定上overflow:hidden，也只能将超过蓝色海洋的黄色一部分裁剪，就像图3，海洋此时是手脚无措啊。

图3：无辜的海洋

俗话说的好，魔高1尺道高1丈，解铃还须系铃人。鲜红色大地怎就甘愿段子跑出去呢。如何说大地终究是段子的先祖元素，如何能甘愿由着段子无法无天呢。因而，大地历尽千辛，寻得秘籍，在自身的款式中加上position:relative特性，将段子的包括块又改为了大地来决策。这下段子就乖乖的被关起来了。星球看起来又返回了最开始的情况。

因此说，hidden并沒有无效，而是有将会大家遇到的状况正好考虑了第6个标准，使得元素的包括块产生了转变。上面的故事中，也提到了在遇到‘hidden’无效的状况时，能够依据必须来更改元素的包括块来做到公平正义的目地。