关于overflow:hidden

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

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

溢出隐藏

通常会遇到的状况是内容超出了父级盒子，以下：

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

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

.box {
	width: 200px;
	height: 50px;
	margin: 200px auto;
	background: #ccc;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

<div class="box"> 我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本内容我是文本 </div>

 

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

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

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的背景色，那么处理办法有：

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

二、若是咱们不须要给盒子添加高度，让其自适应图片高，那么咱们能够给img添加display:block;

 

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