（本文只针对hidden这个值的用处进行阐述）

关于overflow:hidden;很多人都知道他是溢出隐藏的一个属性，但是并不是很多人知道它的一些神奇的地方！首先先讲一下众所周知的溢出隐藏吧！

溢出隐藏

一般会遇到的情况是内容超出了父级盒子，如下：

使用overflow:hidden;之后，显示就是这样的：

哪里超出就隐藏哪里！一般会用在一行文本超出固定宽度就隐藏超出的内容，但是这种情况一般会和省略号一起配合使用，超出位置显示省略号（是一行文本才有效哦）：

使用这种方式的话，盒子一定要是块级盒子，并且有宽度哦！

以上只是说了它本身溢出隐藏的功能，那么接下来说一下它奇特的一些功能！

overflow:hidden;清除浮动

布局的时候肯定会有一种情况，在一个父级盒子中，有左右浮动的两个子级盒子，也就是常见的左右布局，但是子级的内容不定，会多也会少，这个时候父级就不能给一定的高度，而是根据子级的内容的多少来改变，如果不给高度，那么页面就会有塌陷的问题，什么是父级塌陷的问题呢？我们先来了解一下！

首先下面这个是父级（红色的盒子）给了一定的高度，并且左右两个子级浮动，显示布局是没有问题的，

但是现在我们想的是，right里面的内容增加，那么父级盒子应该一起增高，并且将footer部分顶下去，那么就不给红色父级高度，让父级自适应，这个问题大家一般会想到删除高度，但是问题就来了：

相信很多人在写页面的时候都会遇到这个类似的问题，那这个问题就是父级塌陷了！我们可以看到红色的父级不再显示，然而footer部分跑到了红色盒子的两个子级的下面去了。可以这么通俗的去理解：两个子级因为浮动的关系，脱离了标准流，但是父级没有给高度，父级就认为它没有任何内容，所以高度就不会被内容撑开，相当于父级的高度是0px;那么跟他平级的盒子footer,就会按照标准流的排布，紧挨着平级的红色盒子排着下来，只是红色的盒子高为0而已。这个就造成了页面的塌陷！那么这个是时候就要靠overflow：hidden;发挥它的作用了！我们先加上它看看什么效果：

这种情况是完全没有给父级加高度，只是加了一个overflow:hidden;如果这个时候我们同样不给浮动的右盒子高度，让它靠自己的内容撑开，就想列表新闻一样，列表多了，盒子就大了，那么红色的父级也会跟着增高的

假设right内容有点少

现在增加right

现在可以看到父级随着子级的内容的多少而改变高度，对布局不造成任何影响！

如果你在ie比较低版本的浏览器中使用overflow：hidden；也不能达到这样的效果，那么就加上 zoom:1;

所以为了让兼容性更好的话，如果使用overflow:hidden;来清除浮动，解决父级塌陷这个问题的话，建议配合 zoom:1;来使用，即：overflow:hidden;zoom:1;

解决插入图片时的底部留白问题！

插入图片时，如果存放图片的父级盒子没有给高度，那么父级盒子根据图片高度撑开，并且会多出几像素，例如：

底部那个红色就是父级盒子box的背景色，那么处理办法有：

1、给父级加一个高度height，和图片一样高，并且添加overflow:hidden;这两个一起添加，兼容性会更好一些！

2、如果我们不需要给盒子添加高度，让其自适应图片高，那么我们可以给img添加display:block;

如果本文对你有帮助，记得推荐一下哦！